Edición de «Tailwind CSS»

{{Ficha de software|nombre=Tailwind CSS|logo=Tailwind CSS logo with dark text.svg|captura=|pie=|desplegable=|autor=Adam Wathan, Steve Schoger {{cita requerida}}|desarrollador=Tailwind Labs<ref>{{Cita web|url=https://github.com/tailwindlabs|título=Tailwind Labs|fechaacceso=2021-11-13|sitioweb=GitHub|idioma=en}}</ref>|modelo_desarrollo=[[código abierto]]|licencia=[[Licencia MIT|MIT]]{{nbsp}}<ref name="licencia">{{Obra citada|título=Github: tailwindlabs/tailwindcss, LICENSE|url=https://github.com/tailwindlabs/tailwindcss/blob/769d22fecc1c5faafb5b5d6c406ac33ed3ecc33f/LICENSE|fechaacceso=2021-10-18|fecha=2021-10-18|idioma=en}}</ref>|lanzamiento={{fecha|1|11|2017}}|sitio_web=https://tailwindcss.com/|web_lanzamiento=https://github.com/tailwindlabs/tailwindcss/releases/tag/v0.1.0|versiones=|última_versión=v3.0.2|fecha_última_versión={{fecha de lanzamiento|13|12|2021}}|web_última_versión=https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.2|género=[[Framework de CSS]]|repositorio=https://github.com/tailwindlabs/tailwindcss|plataforma=[[Node.js]]|tamaño=|estado=activo|soporte=[https://github.com/tailwindlabs/tailwindcss Incidencias y debates en GitHub]|idiomas=inglés|español=No|sistema_operativo=|método_actualización=gestor de paquetes|lenguaje_programación=[[JavaScript]]|núcleo_tipo=|núcleo=}}

'''Tailwind CSS''' es un [[Framework de CSS|''framework'' de CSS]] de [[código abierto]]<ref name="licencia" /> para el diseño de páginas web. La principal característica de esta biblioteca es que, a diferencia de otras como [[Bootstrap (framework)|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.<ref>{{Cita publicación|url=https://epb.bibl.th-koeln.de/frontdoor/index/index/docId/1666|título=Design Systems for Micro Frontends - An Investigation into the Development of Framework-Agnostic Design Systems using Svelte and Tailwind CSS|apellidos=Klimm|nombre=Marvin Christian|fecha=2021-02-26|editorial=Hochschulbibliothek der Technischen Hochschule Köln|fechaacceso=2021-11-13}}</ref>

Por ejemplo, mientras que en otros sistemas tradicionales existiría una clase {{código|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: {{código|bg-yellow-200}} y {{código|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 (framework)|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.<ref>{{Cita web|url=https://tailwindcss.com/docs/utility-first|título=Utility-First - Tailwind CSS|fechaacceso=2021-11-13|sitioweb=tailwindcss.com|idioma=en}}</ref> 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...

{| class="wikitable"
|+Ejemplo: aviso amarillo
! scope="row" |Resultado
| colspan="2" |[[Archivo:Ejemplo_Tailwind_aviso_amarillo.png|500x500px|Ejemplo Tailwind aviso amarillo.png]]
|-
! scope="row" |Código
| colspan="2" |<syntaxhighlight lang="html">
<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>
</syntaxhighlight>
|-
! rowspan="5" scope="row" |Clases
!Tailwind
!CSS equivalente
|-
|{{código|p-4}}
|<syntaxhighlight lang="css" inline="1">padding: 1rem;</syntaxhighlight>
|-
|{{código|bg-yellow-200}}
|<syntaxhighlight lang="css" inline="1">background-color: rgba(229, 231, 235, 1);</syntaxhighlight>
|-
|{{código|font-bold}}
|<syntaxhighlight lang="css" inline="1">font-weight: 700;</syntaxhighlight>
|-
|{{código|rounded-lg}}
|<syntaxhighlight lang="css" inline="1">border-radius: 0.5rem;</syntaxhighlight>
|}

=== Variantes ===

Tailwind ofrece la posibilidad de aplicar una clase de utilidad solo en algunas situaciones a través de ''[[Media query|media queries]]'', a lo que se le llama una variante. El principal uso de las variantes es para diseñar una [[Diseño web adaptable|interfaz adaptable]] a varios tamaños de pantalla.<ref>{{Cita web|url=https://tailwindcss.com/docs/responsive-design|título=Responsive Design - Tailwind CSS|fechaacceso=2021-11-13|sitioweb=tailwindcss.com|idioma=en}}</ref> También hay variantes para los distintos estados que puede tener un elemento, como {{código|hover:}} para cuando se pone el ratón encima, {{código|focus:}} cuando se selecciona con el teclado o {{código|active:}} cuando está en uso,<ref>{{Cita web|url=https://tailwindcss.com/docs/hover-focus-and-other-states|título=Hover, Focus, & Other States - Tailwind CSS|fechaacceso=2021-11-13|sitioweb=tailwindcss.com|idioma=en}}</ref> o para cuando el navegador o sistema operativo tiene activado el [[modo oscuro]].<ref>{{Cita web|url=https://tailwindcss.com/docs/dark-mode|título=Dark Mode - Tailwind CSS|fechaacceso=2021-11-13|sitioweb=tailwindcss.com|idioma=en}}</ref> 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 {{code|md:bg-yellow-400}} aplicará la clase {{code|bg-yellow-400}} si el tamaño de la pantalla es superior al valor definido para {{code|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]].<ref>{{Cita web|url=https://tailwindcss.com/docs/installation|título=Installation - Tailwind CSS|fechaacceso=2021-11-13|sitioweb=tailwindcss.com|idioma=en}}</ref>

=== 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 {{código|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 ===

{{Desactualizado|t=20211214163550}}

Tailwind actualmente cuenta con un 
único modo de funcionamiento que determinan la manera en la que se genera el CSS final, así como las funcionalidades disponibles.
==== JIT ====

El modo JIT (del inglés ''Just-In-Time'', justo a tiempo) es el modo actual. 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.
==== Generar todo y purgar ====

El modo por defecto de Tailwind{{actualizar|2022}} 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 presentaba como inconvenientes tiempos elevados de espera y grandes tamaños de los archivos CSS antes de ser purgados. Este modo de funcionamiento dejó de estar disponible en la versión 3 de Tailwind.<ref name="v3">{{Cita web |url=https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0 |título=Release v3.0.0 · tailwindlabs/tailwindcss |fechaacceso=2026-08-20 |apellido=tailwindlabs |sitioweb=GitHub |idioma=en}}</ref>

== 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 ==
{{Columnas}}
* [[Github]]{{nbsp}}<ref>{{Cita web|url=https://copilot.github.com/|título=GitHub Copilot · Your AI pair programmer|fechaacceso=2021-10-18|sitioweb=GitHub Copilot|en=Código fuente|idioma=en}}</ref>
* [[Firefox]]{{nbsp}}<ref>{{Cita web|url=https://accounts.firefox.com/|título=Firefox Accounts|fechaacceso=2021-10-18|sitioweb=accounts.firefox.com|en=Código fuente}}</ref><!-- ojo que el login parece que justo no lo usa, ver en los ajustes en otro momento -->
* [[Netlify]]{{nbsp}}<ref>{{Cita web|url=https://www.netlify.com/blog/2021/03/23/from-semantic-css-to-tailwind-refactoring-the-netlify-ui-codebase/|título=From semantic CSS to Tailwind - Refactoring the Netlify UI codebase|fechaacceso=2021-10-28|sitioweb=Netlify|idioma=en}}</ref>
{{Nueva columna}}
* [[NBA]]{{nbsp}}<ref>{{Cita web|url=https://www.nba.com/|título=The official site of the NBA for the latest NBA Scores, Stats & News. {{!}} NBA.com|fechaacceso=2021-10-18|sitioweb=www.nba.com|en=Código fuente|idioma=en}}</ref>
* [[NASA]]{{nbsp}}<ref>{{Cita web|url=https://www.jpl.nasa.gov/|título=NASA Jet Propulsion Laboratory (JPL) - Robotic Space Exploration|fechaacceso=2021-10-18|sitioweb=NASA Jet Propulsion Laboratory (JPL)|idioma=en|en=Código fuente}}</ref>
* [[Netflix]]{{nbsp}}<ref>{{Cita web|url=https://top10.netflix.com/|título=Netflix Top 10 - Global|fechaacceso=2021-11-21|sitioweb=top10.netflix.com|idioma=en|en=Código fuente}}</ref>
{{Final columnas}}

== Véase también ==

* [[Bootstrap (framework)]]

== Enlaces externos ==

* [https://tailwindcss.com/docs Documentación oficial de Tailwind].
* [https://play.tailwindcss.com Tailwind Play], entorno de pruebas en tiempo real.

== Referencias ==
{{listaref|2}}

{{Control de autoridades}}
[[Categoría:Bibliotecas de CSS]]
[[Categoría:HTML]]
[[Categoría:Diseño web]]