¿Qué es Tailwind CSS?

Tailwind CSS es un marco de CSS orientado a utilidades para construir rápidamente sitios web modernos sin salir de tu HTML.

Tailwind CSS funciona escaneando todos tus archivos HTML, componentes de JavaScript y cualquier otra plantilla en busca de nombres de clases, generando los estilos correspondientes y luego escribiéndolos en un archivo CSS estático.

Es rápido, flexible y fiable — con cero tiempo de ejecución.

Características

Debido a la diferencia en conceptos básicos en relación con otros marcos de CSS tradicionales como Bootstrap, es importante conocer la filosofía de la que fue creado Tailwind, así como su uso básico.

Clases de utilidades

El concepto de primero utilidades se refiere a la característica principal diferenciadora de Tailwind. En lugar de crear clases alrededor de componentes (botón, panel, menú, cuadro de texto...), las clases se construyen alrededor de un elemento de estilo específico (color amarillo, fuente en negrita, texto muy grande, centrar elemento...). A cada una de estas clases se le llama clases de utilidades.

Hay muchas clases de utilidades en Tailwind CSS que permiten controlar un gran número de propiedades de CSS como colores, borde, tipo de visualización (display), tamaño de fuente y fuente, layout, sombra...

Variantes

Tailwind ofrece la posibilidad de aplicar una clase de utilidad solo en algunas situaciones a través de consultas de medios, lo que se llama una variante. El uso principal de las variantes es diseñar una interfaz responsiva para varios tamaños de pantalla. También hay variantes para los diferentes estados que puede tener un elemento, como hover: para cuando se pasa el ratón por encima, focus: cuando se selecciona con el teclado o active: cuando está en uso, o cuando el navegador o sistema operativo tiene habilitado el modo oscuro.

Las variantes tienen dos partes: la condición que debe cumplirse 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 usando JavaScript, se ejecuta a través de Node.js e instala con gestores de paquetes de entorno como npm o yarn.

Configuraciones y temas

Es posible configurar las clases de utilidades y variantes que ofrece Tailwind a través de un archivo de configuración generalmente llamado tailwind.config.js. En la configuración, se pueden establecer los valores de las clases de utilidades, como la paleta de colores o los tamaños entre elementos para los márgenes.

Generar todo y purgar

El modo predeterminado de Tailwind es que el sistema genera todas las combinaciones de CSS posibles basadas en la configuración del proyecto. Luego, mediante otra utilidad como PurgeCSS, se recorren todos los archivos y se eliminan del archivo CSS resultante las clases que no se están utilizando.

Debido al número de clases que pueden generarse por la cantidad de variantes y sus combinaciones, este método tiene los inconvenientes de largos tiempos de espera y grandes tamaños de archivos CSS antes de ser purgados. Este modo de operación ya no está disponible en la versión 3 de Tailwind CSS.

Modo Just-in-time

El modo JIT (Just-In-Time) es una forma alternativa de generar el CSS que, en lugar de generar todas las clases posibles y luego eliminar todas aquellas que no se están utilizando, analiza el contenido de los archivos HTML (o extensiones o ubicaciones configuradas) y genera instantáneamente solo aquellas clases que son necesarias y se utilizan.

Dado que ya no se generan todas las variables posibles, el tiempo de espera y el tamaño de los archivos CSS resultantes se reduce considerablemente. Esta mejora técnica ha hecho posible introducir numerosas nuevas variantes y clases de utilidades, así como la capacidad de crear clases de utilidades al vuelo con valores arbitrarios no establecidos en la configuración.

A partir de la versión 3 de Tailwind CSS, el modo JIT se ha convertido en el predeterminado.