De todos los frameworks de CSS que existen (Bootstrap, Material UI, ChakraUI, PureCSS), uno de los que mas he usado este año ha sido TailwindCSS.
Así que para aquellos que no saben nada de este framework me gustraia comentarles de que se trata y como lo uso en la practica en muchos de mis proyectos web.
¿Qué es TailwindCSS?
TailwindCSS es un conjunto de clases de CSS que ya vienen predefinidas para que simplemente las empices a llamar desde tus interfaces HTML, y al unirlas o llamarlas en conjunto, crees interfaces usando nombres de clases CSS que son consistentes y bastante faciles de recordar.
Es basicamente escribir código de CSS puro pero desde HTML o tus interfaces web, y que ya estan organizadas con nombres intuitivos.
Porque TailwindCSS
¿Ahora si se parece a CSS, porque simplemente no usar CSS? Bueno, el crear diseño de interface y el código de CSS optimizado que los haga funcionar puede ser una tarea complicada y que puede llegar a tomar mucho tiempo, cuando se habla de desarrollar proyectos intermedios y grandes.
Y es que la principal dificultad de CSS, no es escribirlo sino el nombrar las clases de CSS que permitan a multiples desarrolladores trabajar.
Por ejemplo frameworks como Bootstrap y Material Crean componentes UI de alto nivel. Esto quiere decir que puede llamar componentes como Botones, Cards, Dropdowns, Carousell, Forms, popups y así.
Por ejemplo este es un button en Bootstrap:
<button type="button" class="btn btn-primary">Primary</button>
Tailwind por otro lado no sigue este enfoque sino que permite llamar distinta clases que unidas permiten crear ui similares a estos componentes mencionadaos.
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
En tailwind tienes clases como:
- flex, para crear flexbox
- grid, para css grid
- bg, para colores de background
- p, para pading
- m, para margin
y una lista enorme de otras clases para sombras, colores de texto, imagenes responsive, y así.
Responsive
Para el diseño responsive, Tailwind usa un diseño por defecto que es mobile First, esto quiere decir que puedes crear clases que se aplicacion de acuerdo al tamaño de pantalla, y lo genial es que no es solo para las columnas, sino tambien para lo textos, colores, y demas.
es decir que puede añadir claes que pueden cambiar en distitnos tamaños de pantalla.
Asi mismo puedes añadir clases que permitan usar pseudo clases, como hover, focus o selected, por ejemplo; para manejar los cambios estado de un componente.
o tambien usar clases como dark: para poder añadir clases que solo se veran en modo oscuro.
Este enfoque hace que a diferencia de otros frameworks de CSS, el desarrollador tenga más versatilidad de crear tus propios componentes, ademas se seguir las reglas de un dseño de sistema que no obtendrias si solo usaras CSS (Design System)
Haciendo que Tailwind sea una opcion intermedia entre escoger CSS puro (Configuration) y un Frameworks de CSS (Convetion).
La verbosidad de Tailwind
Aunque hay un costo, el usar clases independientes permite versatilidad pero tambien vuelve el código más verboso. Por ejemplo este es un componente boton con distinto colores:
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>
<button type="button" class="py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Alternative</button>
<button type="button" class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">Dark</button>
Esto hace que tengas que repetir clases al momento de estilzar, sin embargo actualmente en proyectos Frontend es muy comun usar Frameworks y Generadore de sitios estaticos (Astro) en Producción por lo que si estas aprendiendo React, Vue, Angular, Svelte, y cualquier otro framework de Javascript, todos estos permiten crear componentes lo que significa que no es necesario repetir clases, solo creas uno y lo reutilizas:
<Button/>
<Button/>
<Button/>
Configuraciones @apply
Y tambien puedes usar las clases de Tailwind dentro de archivo de estilos CSS usando la directiva @apply, la cual te permitiria unir distintas clases de tailwind en un solo nombre de clase CSS reutilizable.
o tambien puedes añadir nuevas reglas de CSS usando su archivo de configuracion (tailwind.config.js), para que puedas crear tus propios nombres de clases y unirlos a los de tailwind, permitiendo expandir el framework.
Rendimiento
La mayor ventaja que veras de Tailwind es la optimizacion al momento de pasar a Producción.
Es decir cuando estes desarrollando tu sitio, Taiilwind puede llegar a pesar al rededor de 3MB, debido a que tienes la popsibilidad de usar todas sus funcionalides, pero en producción, no todas las clases son necesarias por lo que tailwind creará un archivo de CSS dejando solo las clases que uses, reduciendo enormemente el peso de tus estilos y permitiendo que tu sitio cargue rapido.
Esto es posible gracias a que Tailwind esta basado en otra herramienta llamada PostCSS, que es la que hace este trabajo. PostCSS es un preprocesador de CSS, similar a Sass, Less o Stylus. De hecho Tailwind tambien puede ser usado con estos otros preprocesadores, aunque no es necesario, de hecho hasta el momento no he necesitado este enfoque.
Solo que le da esta popsibilidad a proyectos que son muy grandes que ya integran estos preprocesadores.
VScode Extension
Ahora como tailwind tiene una enorme cantidad de clases que el mismo desarrollador debe escribir, memorizarlas puede llevar tiempo. Por suerte para evitar esto, Tailwind tambien tiene una extension para editores de código como Visual Studio code, que permite autocompletar clases, lo que significa que no tienes que memorizar todas, solo escribir una palabra y tailwind te completara el resto, e incluso si posiciones el cursor encima del nombre de la clase, te muestra que estilos de css esta añadiendo.
Componentes
Todo esto hace que TailwindCSS sea de las opciones más optimas para estilizar proyecto web actualmente, pero si vienes de otros frameworks de CSS que ya te dan componentes hechos, y buscas algo similar en Tailwind, tambien debes conocer proyectos como:
Por nombrar algunos, los cuales son sitios de la comunidad en donde comparten y venden componentes ya creados de interfaces comunes como botones, ventanas modales (dialog), carousel, tarjetas, grids, y demas ya estilizados bajo un mismo tema.
Aunque Tailwind tambien tiene un sitio adicional llamado tailwindui.com que es similar a estos otros sitios que te menciono que te dan componentes hecho, solo que este si tiene un costo al rededor de 300$, y que es un solo pago de por vida, que te brinda componentes, y sitios de plantillas creados con Tailwind que esta disnponible en JSX para React, en Vue o Vanilla HTML. Este es el que más he utilizado en muchos proyectos y es muy util, porque continuan añadiendo más componentes y plantilla, y como ya lo tengo pagado, sigo pudiendo acceder a ese contenido.
Conclusión
En conclusión Tailwind es una opcion muy versatil y bastante optima para crear sitios web, escribir código en este Framework de CSS, es casi como escribir clases de CSS, pero con un sistema de diseño ya creado, y bastante versatil para crear proyectos de todo tipo.
Tiene una comunidad muy grande, y si no quieres amarrarte a un framework con clases predefinidas esta es una opcion más intuitiva y cerca al estandar de CSS.
Integrarlas en tus frameworks de Javascript es muy facil, y sino usas frameworks de Frontend (React, Vue, Svelte, etc) tambien puedes probar generadore de sitios estaticos como Astro que tambien permite generar sitios HTML e integrar tailwind facilmente, obteniendo todos estos beneficios.