Tailwind CSS es un framework CSS de código abierto . A diferencia de otros frameworks, como Bootstrap , no proporciona una serie de clases predefinidas para elementos como botones o tablas. En su lugar, crea una lista de clases CSS "utilitarias" que se pueden usar para dar estilo a cada elemento mediante la combinación y combinación de ellas. [5] [6]
Por ejemplo, en otros sistemas tradicionales, habría una clase message-warningque aplicaría un color de fondo amarillo y texto en negrita. Para lograr este resultado en Tailwind, habría que aplicar un conjunto de clases creadas por la biblioteca: bg-yellow-300y font-bold.
Al 5 de agosto de 2024, Tailwind CSS tiene más de 81 000 estrellas en GitHub . [7]
Debido a la diferencia en conceptos básicos en relación a otros frameworks CSS tradicionales como Bootstrap, es importante conocer la filosofía a partir de la cual se creó Tailwind, así como su uso básico.
El concepto de utilidad primero se refiere a la principal característica diferenciadora de Tailwind. [8] 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, elemento central...). Cada una de estas clases se denomina clases de utilidad .
Hay muchas clases de utilidad en Tailwind CSS que permiten controlar una gran cantidad de propiedades CSS como colores, borde, tipo de visualización ( display ), tamaño de fuente y fuente, diseño, sombra...
Tailwind ofrece la posibilidad de aplicar una clase de utilidad solo en algunas situaciones a través de consultas de medios , lo que se denomina variante. El uso principal de las variantes es diseñar una interfaz responsiva para varios tamaños de pantalla. [9] También existen variantes para los diferentes estados que puede tener un elemento, como hover:cuando se pasa el mouse sobre él, focus:cuando se selecciona el teclado o active:cuando está en uso, [10] o cuando el navegador o el sistema operativo tienen habilitado el modo oscuro . [11]
Las variantes tienen dos partes: la condición que se debe cumplir y la clase que se aplica si se cumple la condición. Por ejemplo, la variante md:bg-yellow-400aplicará la clase bg-yellow-400si el tamaño de la pantalla es al menos el valor definido para md.
Tailwind CSS se desarrolla utilizando JavaScript , se ejecuta a través de Node.js y se instala con administradores de paquetes de entorno como npm o yarn . [12]
Es posible configurar las clases de utilidad y las variantes que ofrece Tailwind a través de un archivo de configuración que suele tener el nombre tailwind.config.js. En la configuración, se pueden establecer los valores de las clases de utilidad, como la paleta de colores o los tamaños entre elementos para los márgenes.
El modo predeterminado de Tailwind es que el sistema genera todas las combinaciones CSS posibles en función de 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 utilizan.
Debido a la cantidad de clases que se pueden generar 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. [13]
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 las que no se utilizan, analiza el contenido de los archivos HTML (o extensiones o ubicaciones configuradas) y genera instantáneamente solo aquellas clases que se necesitan y se utilizan.
Como ya no se generan todas las variables posibles, el tiempo de espera y el tamaño de los archivos CSS resultantes se reducen enormemente. [ cita requerida ] Esta mejora técnica ha hecho posible introducir numerosas nuevas variantes y clases de utilidad, así como la capacidad de crear clases de utilidad sobre la marcha 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. [13]
Tailwind CSS utiliza versiones semánticas para identificar su compatibilidad con versiones.
.svg/1280px-Free_and_open-source_software_logo_(2009).svg.png){kind=logo}