Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

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

Pablo Huet
  • Escrito por Pablo Huet el 21 de Enero de 2022
  • 3 min de lectura Frameworks
Qué es Tailwind CSS y por qué deberías usarlo

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.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Curso de Optimización CSS

Curso de Optimización CSS

curso

Con este curso aprenderás:

  • Identificar los factores que influyen en el proceso de creación de hojas de estilos.
  • Optimizar los procesos de desarrollo de hojas de estilos para hacerlos más eficientes.
  • Conocer y utilizar algunas de las herramientas y metodologías que nos ayudarán en el proceso.

Duración: 2 horas y 11 minutos

Curso de maquetación web con CSS

Curso de maquetación web con CSS

curso

Con este curso aprenderás:

  • Aprenderás a crear de manera clara y eficaz la estructura de tu Web colocando los elementos donde tú deseas.
  • Conocerás el funcionamiento a nivel de maquetación de los distintos tipos de etiquetas.
  • Comprenderás cómo funciona el flujo de una Web

Duración: 2 horas y 10 minutos

Más de 300 empresas confían en nosotros

Oesia
Vass
Everis
Ayesa
Altran
Ibermatica
Atmira
GFI
Accenture
GMV
Concatel
Telefonica
Caser
Banco de España
kpmg
Mapfre
Randstad