¿Qué es Tailwind CSS?
Tailwind CSS es un framework CSS para añadir estilos a una página web sin salir del HTML. Es decir, en el mismo documento donde maquetas la página, aplicas las clases que necesitas.
Estas clases proporcionadas por el framework son de utilidad. Cada una tiene una función concreta. Son como piezas de Lego donde vas usando las que necesitas.
Vamos a verlo con un ejemplo: Imagina que tienes una cabecera H1 y quieres aplicar 3 características: un tamaño de 48px, que esté en negrita y centrado.
Con CSS estándar escribirías una clase parecida a esta:
.title {
font-size: 48px;
line-height: 1;
font-weight: 700;
text-align: center;
}Code language: CSS (css)Y la aplicarías a tu cabecera así:
<h1 class="title">Esta es mi cabecera</h1>Code language: HTML, XML (xml)Sin embargo, con Tailwind CSS no tienes esa separación entre el HTML y el CSS. Tienes a tu disposición todas las clases de utilidad (como si fuesen piezas) para que las uses directamente en el HTML. Por tanto lo harías así:
<h1 class="text-5xl font-fold text-center">Esta es mi cabecera</h1>Code language: HTML, XML (xml)- La clase text-5xl define un tamaño de 48px
- La clase font-bold pone el texto en negrita.
- La clase text-center centra el texto.
Al principio es normal que esta ristra de clases asuste un poco, y que dé una sensación de desorden.
A priori la solución con CSS estándar parece más organizada, pero cuando pasa el tiempo, después de crear la página, si tienes que volver y hacer alguna modificación, de un vistazo sabes qué hacen las clases cuando usas Tailwind CSS. Sin embargo con CSS estándar tienes que buscar la definición de la clase title.
Por mucho que leas, tu mente no hará ese clic hasta que lo pruebes. Cuando lleves un rato construyendo una página con Tailwind CSS y lo experimentes te darás cuenta de sus ventajas.
¿Qué ventajas tiene respecto a usar CSS estándar?
- No pierdes energía pensando en nombres de clases. Además si eliges un mal nombre, más adelante puedes necesitar una refactorización bastante laboriosa.
- No necesitas archivos CSS, porque todo se trabaja en el HTML.
- Si haces un cambio en una página, no romperás el resto.
- Hay límites predefinidos. Aunque puedes especificar valores concretos, gracias al motor Just-in-Time, las clases tienen unos valores predefinidos. Así se consigue una buena armonía visual.
- Puedes definir estilos para hacer la página adaptable a diferentes pantallas, sin necesidad de usar media queries.
- Puedes definir estados CSS, sin necesidad de usar pseudoclases.
No obstante, si tienes componentes en tu página que usan exactamente las mismas clases, tienes la posibilidad de crear un CSS para no repetir código. Lo bueno es que incluso ahí usas las clases de Tailwind CSS.
Por ejemplo, imagina que todas las cabeceras H2 de tu página tienen los mismos estilos (algo muy recomendable) y no te gusta repetirlos. Puedes definir un CSS de esta manera:
Luego solo tendrás que usar la clase btn en cada H2 que tengas. De hecho, no haría falta hacerlo así, porque hay una manera más cómoda que no requiere definir clases, pero vamos a quedarnos con este ejemplo para no introducir demasiados conceptos.
.btn {
@apply text-3xl font-bold text-center;
}Code language: CSS (css)Como ves, al principio he usado @apply. Esto es una directiva de Tailwind CSS para que sepa que lo que viene a continuación no son estilos de CSS estándar, sino clases de utilidad de Tailwind CSS.
Versión en video
¿Te gusta la idea?
Si quieres ver un ejemplo real, lo tienes justo delante. Esta web que estás visitando está diseñada con Tailwind CSS.
Si no quieres perder tiempo investigando y estudiando cómo usarlo leyendo su (ya bastante extensa) documentación, tengo un curso donde te explico paso a paso cómo instalarlo, cómo integrarlo con tu proyecto, cómo hacer una página desde cero, y además a usar sus 4 plugins oficiales que te ahorrarán un montón de tiempo.
De hecho, este artículo está inspirado en la primera lección de introducción, que por cierto puedes ver gratuitamente en la página del curso. Te animo a echar un vistazo porque tiene muchas más cosas interesantes que si no conoces, te sorprenderán.
Está disponible en Udemy: Tailwind CSS – La NUEVA Generación de CSS
