Tailwind: Tu nueva librería de CSS favorita

Introducción

Si llevas tiempo trabajando con CSS seguramente te has encontrado con alguno de estos problemas: Código espagueti, mucho código repetido, falta de organización de los recursos y hasta problemas de mantenimiento de tus hojas de estilo. Y es que, aunque es aparentemente sencillo empezar con CSS, no es intuitivo el cómo organizar tu código, tus hojas de estilo y para colmo, dependiendo de si utilizas algún pre compilador como SASS o LESS puede que te sea difícil reutilizar tus funciones y mixins en otros proyectos.

Seguramente te has visto alguna vez empezando un proyecto y tratando de importar tus mixins antiguos o funciones para generar clases de ayuda para dar márgenes, rellenos, aplicar colores u otras utilidades, así como configurando tu pre compilador o pensando en la dichosa jerarquía de directorios para organizar tus ficheros. Al fin y al cabo ciertas acciones que no radican solo en una simple configuración y a la larga consumen mucho tiempo.

A raíz de problemas como estos es por lo que empecé a fijarme más en librerías que te dieran todo este trabajo hecho, proporcionando directamente los helpers para con una simple importación o configuración base empezar a trabajar en mi proyecto.

Las librerías de CSS

Realmente disponemos de grandes librerías que nos permiten hacer cosas grandiosas, modificarlas a nuestro gusto, extender su funcionalidad o incluso nos proveen de un sistema de componentes predefinidos para no tener que repetir el desarrollo de los componentes principales de nuestra aplicación, y dependiendo de cómo sea nuestro proyecto o las necesidades que tengamos pueden ser muy útiles, pero hay ciertos proyectos que no pueden usar elementos predefinidos porque el diseño que se va a aplicar no concuerda. En estos casos es donde empieza a ser engorroso usar librerías con tantas funcionalidades ya predefinidas, porque inviertes más tiempo modificando lo que no necesitas o no está a tu gusto que si lo crearas desde cero.

Librerías como Bootstrap o Vuetify son verdaderas titanes en cuanto a las utilidades y facilidades que aportan. De hecho, he tenido la oportunidad de realizar proyectos con ambas, y por ejemplo Vuetify me parece increíblemente útil para construir rápidamente sitios funcionales, ya que te da tantos componentes y con tanta funcionalidad que es raro que necesites algo más, eso sí, como tengas que cambiar algo...

Las metodologías

Puede que estés pensando que tu código está muy bien organizado porque usas alguna metodología como BEM, y desde luego es algo básico a la hora de encarar un proyecto grande o mediano, ya que no queremos un caos de clases CSS sin organización y pisándose unas a otras.

El caso es que aunque siempre recomiendo utilizar algún tipo de metodología, esto no suele ser suficiente ya que todas tienen sus limitaciones y siempre acabas dando con el caso que no te cuadra y te toca hacer una pequeña chapuza para que todo encaje.

Además esto no necesariamente te quita el problema de código repetido, aunque siempre puedes extender clases y hacer algunas pericias para que tu código quede lo más pequeño y simple posible.

¿Por qué Tailwind?

A diferencia de otras librerías, Tailwind no proporciona mixins o funciones para que las uses en tus ficheros, se centra en darte todos los tipos de clases que vas a necesitar para modificar tus elementos HTML, casi como si hiciéramos una relación en la que hay una clase para cada propiedad CSS y en muchos casos propiedad-valor.

¡Espera! No te vayas. Esto no quiere decir que vas a tener una hoja de estilos con miles de clases que nunca usarás, todo lo contrario. Gracias a un proceso llamado purge en el que se eliminan de tu hoja de estilos final todas las clases que no se usen en tu código, el resultado final será una hoja de estilos con unos pocos KBs. Es decir, una cosa es todo lo que te ofrece, y otra lo que subes a tu entorno de producción una vez has extraído lo que necesitas.

Y esto es solo el principio, porque si bien es el peso final de tus ficheros CSS es un buen punto a tener en cuenta, el desarrollo tiene que ser el segundo pilar fundamental, y es aquí donde empieza la verdadera magia.

Si trabajas con un sistema de diseño o en base a unas pautas, seguramente tendrás una guía de colores, tipografías, espaciados acordes a una unidad base, etc. Con Tailwind puedes aplicar toda esta configuración para que la librería se adapte a tus necesidades, generando todos los helpers con los parámetros que tú necesitas.

Esto se hace a través de un fichero de configuración en javascript, que le indicará a Tailwind cómo quieres que se genere definiendo un tema, y dentro de ese tema todas sus características. Por ejemplo si quisiéramos que Tailwind en lugar de usar sus colores por defecto únicamente aplicara un rojo y un azul a las clases de los helpers sería tan sencillo como crear un fichero con el nombre tailwind.config.js con el siguiente contenido:

module.exports = {
  theme: {
    extend: {
      colors: {
        red: '#D7503C',
        blue: '#3F82EF'
      }
    }
  }
}

Lo que haría que tuviéramos disponibles las clases text-red,text-blue, bg-red y bg-blue para dar color a nuestros textos y color de fondo a nuestros elementos.

Esto puede aplicarse a cualquier helper que necesitemos configurar o añadir. Y por si te lo preguntas, no es necesario eliminar lo que no se quiera utilizar porque el purge lo hará por ti.

Demasiadas clases en mi HTML

Por otro lado es posible que pienses o que directamente no te guste tener en tu código HTML un montón de clases en cada elemento que vayas a modificar con Tailwind.

Imaginemos que quieres una caja con unas cuantas modificaciones de color, tamaño y cualquier otra cosa que se te ocurra, algo como esto:

<div class="bg-red w-24 h-24 border-2 border-blue rounded p-4"></div>

Si además vas a tener esta configuración de clases es posible que no quieras tener ese código repetido en tu HTML. Para solucionar esto Tailwind nos da la directiva @apply con la que podemos construir nuevas clases aplicando los estilos de otras, de modo que podríamos transformar el código anterior en un HTML más sencillo:

<div class="box"></div>

Y definiendo nuestra clase box de la siguiente manera:

.box {
  @apply bg-red w-24 h-24 border-2 border-blue rounded p-4;
}

Conclusiones

Si no has probado nunca una librería de utilidades CSS es posible que todo esto te suene algo confuso o no termine de encajarte, pero respaldando lo que dice el creador de Tailwind:

I’ve written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to maintain, but the truth is you’re never going to believe me until you actually try it.

Es cierto, hasta que no lo pruebas y ves que realmente agiliza tu desarrollo una barbaridad, no terminas de creértelo.

Debido a su versatilidad y facilidad de adaptación a nuestras necesidades creo que es una opción perfecta para elegir entre la variedad de librerías que hay y es por eso que te animo a que si no la conoces aún, le des una oportunidad.