# Tailwind CSS

Tailwind CSS es un framework de CSS de código abierto para el diseño de páginas web. La principal característica de esta biblioteca es que, a diferencia de otras como Bootstrap, no genera una serie de clases predefinidas para elementos como botones o tablas. En su lugar, crea una lista de clases CSS "de utilidad" que se pueden usar para dar estilos individuales a cada elemento.
Por ejemplo, mientras que en otros sistemas tradicionales existiría una clase warning-message que aplicaría un color de fondo amarillo y un texto en negrita, para conseguir este resultado en Tailwind hay que aplicar un conjunto de clases creadas por la biblioteca: bg-yellow-200 y font-bold (que traducido al español significa fondo-amarillo-200 y fuente-negrita).

## Características

Debido a la diferencia de conceptos básicos en relación con otros sistemas de diseño tradicionales como Bootstrap, es importante conocer la filosofía a partir de la que se creó Tailwind, así como su funcionamiento básico.

### Clases de utilidad

El concepto utility-first (en español, utilidad primero) hace referencia a la principal característica diferenciadora de Tailwind. En lugar de crear clases alrededor de componentes (botón, panel, menú, cuadro de texto...), las clases se crean alrededor de cualidades (color amarillo, fuente negrita, texto muy grande, centrar elemento...). A cada una de estas clases se les llama clases de utilidad.
Existen numerosas clases de utilidad, y es posible controlar una gran cantidad de propiedades CSS: colores, borde, tipo de visualización (display), tamaño y tipo de letra, disposición, sombra...
Ejemplo: aviso amarillo :
| Resultado | | |
| Código | <div class="p-4 bg-yellow-200 font-bold rounded-lg"> <p>Por favor, ten cuidado al dar de comer a los pájaros.</p> </div> | <div class="p-4 bg-yellow-200 font-bold rounded-lg"> <p>Por favor, ten cuidado al dar de comer a los pájaros.</p> </div> |
| Clases | Tailwind | CSS equivalente |
| Clases | p-4 | padding: 1rem; |
| Clases | bg-yellow-200 | background-color: rgba(229, 231, 235, 1); |
| Clases | font-bold | font-weight: 700; |
| Clases | rounded-lg | border-radius: 0.5rem; |

### Variantes

Tailwind ofrece la posibilidad de aplicar una clase de utilidad solo en algunas situaciones a través de media queries, a lo que se le llama una variante. El principal uso de las variantes es para diseñar una interfaz adaptable a varios tamaños de pantalla. También hay variantes para los distintos estados que puede tener un elemento, como hover: para cuando se pone el ratón encima, focus: cuando se selecciona con el teclado o active: cuando está en uso, o para cuando el navegador o sistema operativo tiene activado el modo oscuro. Es posible combinar más de una variante.
Las variantes tienen dos partes: la condición que se debe dar 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 superior al valor definido para md.

## Funcionamiento

Tailwind CSS está desarrollado usando JavaScript, se ejecuta por medio de Node.js y se instala con gestores de paquetes del entorno como npm o yarn.

### Configuración y temas

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

### Modos

Tailwind cuenta con varios modos de funcionamiento que determinan la manera en la que se genera el CSS final, así como las funcionalidades disponibles.

#### Generar todo y purgar

El modo por defecto de Tailwind consiste en que el sistema genera todas las combinaciones posibles de CSS según la configuración del proyecto. Después, por medio de otra utilidad como PurgeCSS, se recorren todos los archivos y las clases que no estén siendo usadas son eliminadas del archivo CSS resultante.
Debido a la cantidad de clases que pueden generarse por el número de variantes y sus combinaciones, este método presenta como inconvenientes tiempos elevados de espera y grandes tamaños de los archivos CSS antes de ser purgados. Este modo de funcionamiento dejará de estar disponible en la versión 3 de Tailwind, que actualmente se encuentra en versión alfa.

#### JIT

El modo JIT (del inglés Just-In-Time, justo a tiempo) es un modo alternativo para generar el CSS que, en lugar de generar todas las clases posibles y luego eliminar todas aquellas que no se estén usando, analiza el contenido de los archivos HTML (o las extensiones o ubicaciones configuradas) y genera en el momento solo aquellas clases que sean necesarias y que se hayan usado.
Debido a 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 posibilitado la introducción de numerosas nuevas variantes y clases de utilidad, así como la posibilidad de crear clases de utilidad sobre la marcha con valores arbitrarios no establecidos en la configuración.
Está previsto que, empezando con la versión 3 de Tailwind CSS, el modo JIT pase a ser el modo activado por defecto.

## Versiones

Tailwind CSS usa versionado semántico para identificar la compatibilidad de sus versiones.

## Galerías y kits de complementos

Existen iniciativas que ofrecen paquetes de complementos diseñados e implementados usando Tailwind CSS. Estas galerías permiten copiar y pegar elementos para construir rápidamente interfaces de usuario enfocándose en la calidad del diseño de los componentes.

## Usos prominentes

| Github Firefox Netlify | NBA NASA Netflix |