Tailwind CSS , la enciclopedia libre

Tailwind CSS
Información general
Tipo de programa	Framework de CSS
Autor	Adam Wathan, Steve Schoger [cita requerida]
Desarrollador	Tailwind Labs[1]​
Modelo de desarrollo	código abierto
Lanzamiento inicial	1 de noviembre de 2017
Licencia	MIT [2]​
Estado actual	activo
Idiomas	inglés
Información técnica
Programado en	JavaScript
Plataformas admitidas	Node.js
Método de actualización	gestor de paquetes
Versiones
Última versión estable	v3.0.2 (info) ( 13 de diciembre de 2021 (3 años, 2 meses y 23 días))
Asistencia técnica
Incidencias y debates en GitHub
Enlaces
Sitio web oficial Repositorio de código
[editar datos en Wikidata]

Tailwind CSS es un framework de CSS de código abierto^[2]​ 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.^[3]​

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).

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.

El concepto utility-first (en español, utilidad primero) hace referencia a la principal característica diferenciadora de Tailwind.^[4]​ 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>
Clases	Tailwind	CSS equivalente
	p-4	padding: 1rem;
	bg-yellow-200	background-color: rgba(229, 231, 235, 1);
	font-bold	font-weight: 700;
	rounded-lg	border-radius: 0.5rem;

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.^[5]​ 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,^[6]​ o para cuando el navegador o sistema operativo tiene activado el modo oscuro.^[7]​ 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.

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.^[8]​

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.

Este artículo o sección se encuentra desactualizado. La información suministrada ha quedado obsoleta o es insuficiente. Este aviso fue puesto el 14 de diciembre de 2021.

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

El modo por defecto de Tailwind^[actualizar] 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,^[9]​ que actualmente se encuentra en versión alfa.^[actualizar]

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.^{[cita requerida]} 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.^[9]​

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

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.

• Bootstrap (framework)

• Documentación oficial de Tailwind.
• Tailwind Play, entorno de pruebas en tiempo real.