Skip to content

¿Qué es Tailwind CSS?

ALT

David Morales

¿Qué es Tailwind CSS?

¿Quieres verlo en acción?

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.

Clases de utilidad de Tailwind CSS

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; }
Lenguaje del código: CSS (css)

Y la aplicarías a tu cabecera así:

<h1 class="title">Esta es mi cabecera</h1>
Lenguaje del código: 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>
Lenguaje del código: HTML, XML (xml)

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 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; }
Lenguaje del código: 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.

Tailwind CSS - La NUEVA Generación de CSS

Está disponible en Udemy: Tailwind CSS – La NUEVA Generación de CSS

Written by

David Morales

Computer Engineer

Teaching my software engineering knowledge in a creative way.

Would you like to get the Free PDF?

Get The 10 Ninja Keys of the Developer, an exclusive PDF for Newsletter subscribers.

You will also be notified of future articles and affordable courses (in the pipeline) that will turn you into a ninja developer.

View privacy information

Leave a reply

Please fill in all fields.

Your email address will not be published.

View privacy information