Lo prometido es deuda. Hoy traigo mis impresiones con Tailwind. Para ello, he estado probándolo durante un tiempo con mi propio portafolio (en el que aún sigo trabajando) y lo he querido llevar al extremo para ver que tan potente es. Spoiler: se quedará en el proyecto.

¿Qué es TailwindCSS?

#TailwindCSS es un framework de CSS que proporciona clases predefinidas, tal y como hace hashtag#Bootstrap, pero individualizadas para prácticamente todo. Por ejemplo, si quisiéramos un texto amarillo en negrita, usaríamos las clases: text-yellow-500 y font-bold. Esto evita que apenas (por no decir nada) toquemos los ficheros CSS. En contrapartida, en según que casos, consigues elementos con listas gigantescas de clases.

Esto es lo que todo el mundo sabe, pero vayamos un poco más allá…

Impresiones Cuando vi por primera vez Tailwind, como muchos, mi reacción fue de auténtico rechazo. Como iba a poder ser una buena practica esos chorizos en el HTML… Pues bien, a medida lo he ido utilizando con ayuda de su documentación, he podido ver la comodidad que supone no tener que cambiar de fichero a cada rato para modificar el estilo de los nuevos elementos que iba añadiendo. Por otro lado, la cantidad de escritura que abrevias y lo intuitivo que termina siendo después de un rato.

Editado 01/10/2022: Una cosa que pasé por alto cuando estuve viendo Tailwind fue la posibilidad de anidar muchas clases en una sola. De esta forma, no tener esas largas listas de clases en el HTML. Esto funciona tanto en CSS como SASS. Por ejemplo:

/* main.css */

.card-zoom {
    @apply relative flex items-center justify-center overflow-hidden;
}

.card-zoom-image {
    @apply transition-all duration-500 ease-in-out transform bg-center bg-cover;
}

.card-zoom-text {
    @apply transition-all duration-500 ease-in-out transform text-gray-50;
}

.card-zoom:hover .card-zoom-image {
    @apply scale-125 blur-sm;
}

Uso avanzado

Una pregunta que me surgió es: ¿Y si yo quiero poner un tamaño de fuente fuera de las clases predefinidas? Fácil, npm uninstall tailwind… ES BROMA jaja.

Tailwind tiene todo pensado, no sé cómo funciona a nivel interno, pero mediante corchetes serás capaz de pasar valores personalizados, y esto es la guinda del pastel.

Por ejemplo: text-[19px] para poner la fuente a 19px o algo mas avanzado como px-[calc(2vw+1.5em)] para un padding responsive en el eje horizontal. Y esto es aplicable a TODO; height, color, font-family, etc…

Usando este framework, creo que lo más sensato, (al menos si se está usando programación por componentes) es desgranar lo más que se pueda el código para ayudar a la legibilidad del mismo. Esto, en cualquier caso, es una buena práctica, así que dos pájaros de un tiro. Otro consejo, y casi obligatorio, es emplear la extensión de Tailwind para Visual Studio Code, ya que provee de un autocompletado de clases.

De resto, poco mas que decir. Es necesario probarlo lejos de prejuicios para poder determinar si realmente se adapta a tu forma de trabajo, porque como es costumbre, estas cosas son cuestión de gustos.

Detallamos rápidamente, según mi criterio obviamente, sus ventajas y desventajas:

Ventajas

• Configuración muy sencilla y bien explicada para cada framework en la documentación.
• Evita estar cambiando de fichero, puesto que siempre trabajas en el html (jsx, js).
• Si has trabajado con Bootstrap, lo encontrarás bastante intuitivo, sobre todo utilizando el autocompletado de su extensión de VCode.
• Sigues pudiendo hacer uso de CSS o derivados.
• Anidar varias clases en una sola con @apply en los ficheros CSS.

Desventajas

• Etiquetas HTML bastante largas en según que casos si decides no usar hojas de estilo.
• La dependencia del paquete en sí.
• El conocimiento de las clases.

Conclusión

No sé si es por el efecto “juguete nuevo”, pero me está gustando, y como he adelantado al principio, estará en mi propio portafolio. Cuando lo tenga terminado, lo postearé para que se pueda ver el resultado.