Frameworks

Qué es Tailwind CSS y por qué deberías usarlo

Conoce qué es Tailwind CSS, las características que lo hacen más interesante que otras opciones y cómo dar los primeros pasos para comenzar a utilizarlo.

Frameworks

CSS

Pablo Huet

Experto Frontend

Lectura: 3 minutos

Publicado el 21 de Enero de 2022

Lectura: 3 minutos

Tabla de contenidos

Qué es Tailwind CSS
Qué lo hace interesante respecto a competidores
Pasos para incluir Tailwind CSS en nuestros documentos
Conclusiones

Qué es Tailwind CSS

Tailwind, en pocas palabras, es un framework CSS que da prioridad a la utilidad sobre el propio estilo, pero además a diferencia de otros frameworks CSS como Bootstrap o Bulma, Tailwind no provee una serie de componentes predefinidos. En su lugar, este framework opera en un nivel inferior y te proporciona un conjunto de clases de ayuda para estructura y estilado, de forma que, usando dichas clases, puedas crear rápidamente diseños personalizados con facilidad. Además, no es opinionado y gracias a su flexibilidad te permite crear un diseño realmente único.

Qué lo hace interesante respecto a competidores

La solución que propone es proporcionar una amplia variedad de clases CSS que tienen cada una un enfoque propio. En lugar de una clase llamada .btn, como podríamos usar en Bootstrap, que se crearía con un montón de atributos CSS directamente, en Tailwind aplicarías un montón de clases como bg-red-600 py-2 px-4 rounded al elemento botón o bien construirías una clase .btn aplicando esas clases de utilidad a ese selector.

De esta forma, cada pequeña clase utiliza una serie de modificadores sobre nuestro elemento HTML que en conjunto nos permite estilar cada elemento de forma que no sea necesario ni siquiera un gran conocimiento en CSS.

Al principio, la solución con CSS estándar puede parecer más organizada y que delega menos el control, y aunque esto es cierto y es altamente deseable usar el CSS manualmente para soluciones a medida, en el caso de páginas rápidas o de propósito general que deban de verse bien en múltiples dispositivos el uso de Tailwind proporciona un excelente equilibrio entre compatibilidad entre navegadores, estilado, visibilidad y facilidad de uso.

Y aunque al principio resulta un poco extraño, ya seas nuevo en este mundo o estés acostumbrado a un control absoluto del CSS, cuando lleves un tiempo construyendo una página con Tailwind CSS y lo experimentes, te darás cuenta de sus ventajas.

Pasos para incluir Tailwind CSS en nuestros documentos

Vamos a empezar aplicando el CSS de Tailwind directamente a una página HTML estática. Para ello usaremos la versión publicada en su CDN, que pese a no ser la más óptima, es la mejor como un acercamiento.

Crear una nueva página

Puedes empezar simplemente creando un nuevo archivo HTML. Para el contenido, es posible usar cualquier HTML, pero yo usaré fillerama.io para generar un contenido un poco más original:

Imagen 0 en Qué es Tailwind CSS y por qué deberías usarlo

Añadir Tailwind vía CDN

Tailwind típicamente recomienda que se instale a través de npm para obtener la funcionalidad completa, pero, como bien hemos dicho, utilizaremos la versión de su CDN por facilidad y para probar rápidamente sus características. Así que vamos a añadir un enlace al archivo CDN en el <head> de nuestro documento:

<script src="https://cdn.tailwindcss.com"></script>

Una vez recargada la página, lo primero que podrás observar es que todos los estilos básicos de HTML han sido reiniciados y el documento ya no tiene ningún estilo definido:

Imagen 1 en Qué es Tailwind CSS y por qué deberías usarlo

Esto es el comportamiento esperado, ya que para evitar problemas entre navegadores lo primero que hace Tailwind es realizar un reinicio completo de estilos, de esta forma evitando las típicas inconsistencias que encontramos a la hora de estilar.

Usar Tailwind para dar un estilo a la página

Ahora que tenemos el framework instalado, usaremos algunas de las múltiples clases incluidas para dar una apariencia definida a nuestro contenido. Primeramente, podemos usar las reglas de spacing para crear márgenes visibles en nuestros párrafos y listados. Para ello haremos uso de la clase .my-5, que traducido significa margin (m) en el eje y de 5 unidades (En este caso 5 unidades rem):

<p class="my-5">
Then we'll go with that data file! Bender, hurry! This fuel's expensive! Also, we're dying! And I'm his friend Jesus. Yeah, and if you were the pope they'd be all, "Straighten your pope hat." And "Put on your good vestments."
</p>

De forma que nuestros párrafos y listas dispondrán ahora de un espaciado vertical mayor:

Imagen 2 en Qué es Tailwind CSS y por qué deberías usarlo

Ahora para lograr un estilo de los títulos más adecuados podemos comenzar con el titular principal h1:

<h1 class="text-2xl font-bold mt-10 mb-5">

Donde cada clase significa:

text-2xl: Haz que el texto sea extra-grande (En Tailwind esto equivale por defecto a 1.5rem).
font-bold: Pon el texto en negrita.
mt-8: margin (m) superior (t de “top”) a 8 unidades.
mb-5: margin (m) inferior (b de “bottom”) a 5 unidades.

Y adicionalmente podemos poner los títulos h2 y h3 a text-xl y text-lg respectivamente para destacar también un poco más su tamaño:

Imagen 3 en Qué es Tailwind CSS y por qué deberías usarlo

Ahora, por ejemplo, para dar un estilo básico a las listas, podemos hacer:

<ol class="list-decimal list-inside my-5 pl-2">
<ul class="list-disc list-inside my-5 pl-2">

Donde list-decimal será el estilo de listas ordenadas y list-disc será el estilo de listas desordenadas con el símbolo clásico del disco, más unos margins y unos paddings desde la izquierda (padding (p) left (l) a 2 unidades).

Y finalmente podemos insertar en el <body> una clase que limite el tamaño máximo del contenido y lo centre, de forma que aumente su legibilidad:

Imagen 4 en Qué es Tailwind CSS y por qué deberías usarlo

<body class="max-w-5xl mx-auto">

De forma que obtenemos el siguiente aspecto básico final:

Conclusiones

El uso de Tailwind conlleva una serie de ventajas claras, algunas técnicas y otras más abstractas, que simplifican y aceleran el desarrollo de webs:

No pierdes energía pensando en los nombres de las clases: Además, si eliges un mal nombre, puedes necesitar una refactorización bastante laboriosa más adelante.
No necesitas archivos CSS porque todo se trabaja en el HTML: Ya que sólo necesitas enlazar el framework y utilizar las clases de utilidad que te proporciona.
Si haces un cambio en una página, no rompes el resto.
Hay límites predefinidos: Que además Tailwind te permite modificar a voluntad en caso de que quieras establecer unos distintos o simplemente retocarlos.

Sin embargo, esto no significa que no haya desventajas, algunas de las más obvias son:

Hay una pérdida de control en el estilado. El hecho de usar clases predefinidas implica que has de aceptar el estilado dado, y en casos de necesitar un CSS preciso o para una web que no sea simplemente un muestrario es muchas veces preferible mantener el control para poder crear componentes visuales interesantes.
Tantas clases pueden entorpecer la velocidad del navegador. Tener que navegar por todos el CSS de tantas clases puede resultar en bajadas de rendimiento en navegadores, sobre todo en PCs con bajos recursos, aunque esto hoy en día es cada vez menos frecuente.

Aun así, valorando pros y contras, es imposible negar que Tailwind es una solución robusta, que ofrece una velocidad y flexibilidad superiores y que es una solución moderna a problemas que empezaron a solucionarse con otros Frameworks populares como Bootstrap, Bulma o Materialize.

Compartir este post