¿Qué es css Tailwind?

El lenguaje css representa un pilar del desarrollo front end. Hoy en día, cualquier persona que aspire a convertirse en desarrollador web debe necesariamente aprender CSS y estar familiarizado con él.

Qué es css

Es un lenguaje utilizado para definir las llamadas hojas de estilo. Te permite dar una identidad precisa a la estética de la página web, personalizando el diseño, fuentes, imágenes, efectos, estructura y mucho más y "colabora" con el lenguaje HTML.

El desarrollo front end ha experimentado una evolución constante a lo largo de los años, también gracias a los propios programadores que han apoyado y continúan apoyando esta práctica a través de herramientas de código abierto, frameworks front end y bibliotecas CSS.

Entre los más comunes podemos mencionar el framework Bootstrap o w3.css. Recientemente, un framework CSS de código abierto llamado Tailwind CSS está ganando popularidad. Nacido en 2021, se propone como una alternativa a los framework tradicionales y se caracteriza por un enfoque que no se basa en clases que crean elementos preempaquetados, sino que explota una lista de utilidades de clase CSS que permiten implementar el propio estilo directamente en un página HTML.

Tailwind ofrece la posibilidad de aplicar una utility class solo en ciertas situaciones a través de media query, llamadas variantes. El uso principal de las variantes es diseñar una interfaz receptiva para varios tamaños de pantalla. También existen variantes para los diferentes estados que puede tener un elemento, como hover: cuando la flecha del mouse pasa sobre un elemento o texto, focus: cuando el teclado está seleccionado o active: cuando está en uso o cuando el navegador o el sistema operativo tiene habilitado el modo dark.

Las variantes se componen de dos partes: la condición a cumplir y la clase que se aplica si se cumple la condición. Por ejemplo, la variante md:bg-yellow-400 aplicará la clase bg-yellow-400 si el tamaño de la pantalla es mayor que el valor definido para md.

Tailwind CSS se desarrolla con lenguaje javascript, se ejecuta a través de Node.js y se instala con administradores de paquetes ambientales como npm o yarn. Por lo tanto, no necesita un entorno dedicado para iniciarse, es visible directamente en el navegador.

De acuerdo con el creador del framework CSS, Tailwind proporciona todos los building blocks para implementar el propio diseño sin atascarse con la anulación de estilos preempaquetados. En comparación con los framework tradicionales, Tailwind CSS permite dar el propio estilo a los elementos del front end sin tener que modificar el diseño preestablecido en ellos.

El concepto de utility class anterior hace referencia a la principal característica diferenciadora de Tailwind. En lugar de crear clases en torno a componentes (botones, paneles, menús, cuadros de texto...), las clases se crean en torno a un elemento de estilo específico (color amarillo, fuente en negrita, texto muy grande, elemento central...). Cada una de estas clases se denomina clase de utilidad (utility class).

Hay muchas clases de utilidades en Tailwind CSS que permiten controlar una gran cantidad de propiedades CSS como colores, borde, tipo de visualización (display), tamaño de letra y fuente, diseño, sombra...

Proporciona una gran ventaja para el desarrollador porque simplifica la práctica de personalización a través del lenguaje CSS, aumentando la productividad, pudiendo personalizar el diseño de la página web directamente a través del estilo y no tomando el elemento a personalizar individualmente (navbar, botón , menús…).

Todavía tiene que labrarse su popularidad entre los desarrolladores (en comparación con el framework Bootstrap y w3.css antes mencionados), pero es una herramienta muy efectiva para mejorar la productividad en términos de recursos y tiempo.