Tailwind CSS

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 y 18 días))
Asistencia técnica
Incidencias y debates en GitHub
Enlaces
[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).

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.[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 Ejemplo Tailwind aviso amarillo.png
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;

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

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

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

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.

Generar todo y purgar

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]

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

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

Véase también

Enlaces externos

Referencias

  1. ↑ «Tailwind Labs». GitHub (en inglés). Consultado el 13 de noviembre de 2021. 
  2. ↑ a b Github: tailwindlabs/tailwindcss, LICENSE (en inglés), 18 de octubre de 2021, consultado el 18 de octubre de 2021 .
  3. ↑ Klimm, Marvin Christian (26 de febrero de 2021). Design Systems for Micro Frontends - An Investigation into the Development of Framework-Agnostic Design Systems using Svelte and Tailwind CSS. Hochschulbibliothek der Technischen Hochschule Köln. Consultado el 13 de noviembre de 2021. 
  4. ↑ «Utility-First - Tailwind CSS». tailwindcss.com (en inglés). Consultado el 13 de noviembre de 2021. 
  5. ↑ «Responsive Design - Tailwind CSS». tailwindcss.com (en inglés). Consultado el 13 de noviembre de 2021. 
  6. ↑ «Hover, Focus, & Other States - Tailwind CSS». tailwindcss.com (en inglés). Consultado el 13 de noviembre de 2021. 
  7. ↑ «Dark Mode - Tailwind CSS». tailwindcss.com (en inglés). Consultado el 13 de noviembre de 2021. 
  8. ↑ «Installation - Tailwind CSS». tailwindcss.com (en inglés). Consultado el 13 de noviembre de 2021. 
  9. ↑ a b «Release v3.0.0-alpha.1 · tailwindlabs/tailwindcss». GitHub (en inglés). Consultado el 13 de noviembre de 2021. 
  10. ↑ «GitHub Copilot · Your AI pair programmer». GitHub Copilot (en inglés). Código fuente. Consultado el 18 de octubre de 2021. 
  11. ↑ «Firefox Accounts». accounts.firefox.com. Código fuente. Consultado el 18 de octubre de 2021. 
  12. ↑ «From semantic CSS to Tailwind - Refactoring the Netlify UI codebase». Netlify (en inglés). Consultado el 28 de octubre de 2021. 
  13. ↑ «The official site of the NBA for the latest NBA Scores, Stats & News. | NBA.com». www.nba.com (en inglés). Código fuente. Consultado el 18 de octubre de 2021. 
  14. ↑ «NASA Jet Propulsion Laboratory (JPL) - Robotic Space Exploration». NASA Jet Propulsion Laboratory (JPL) (en inglés). Código fuente. Consultado el 18 de octubre de 2021. 
  15. ↑ «Netflix Top 10 - Global». top10.netflix.com (en inglés). Código fuente. Consultado el 21 de noviembre de 2021.