Enfoque basado en clases pequeñas con una sola responsabilidad.

Es la filosofía central de Tailwind. En lugar de crear componentes estilados desde un CSS separado, combinas utilidades como `flex`, `p-4` o `text-white` directamente en el HTML para construir la interfaz.

Clases CSS atómicas que resuelven una sola cosa.

Son clases como `mt-4`, `rounded-xl` o `bg-slate-900`. Cada una modifica una propiedad concreta y se combinan para formar componentes completos sin inventar nombres de clase nuevos.

Reset base de estilos incluido por Tailwind.

Es el conjunto de estilos base que Tailwind inyecta para normalizar el comportamiento entre navegadores. Ajusta márgenes, tipografía, bordes y elementos nativos para partir de una base más consistente.

El CSS queda resuelto en build, no en tiempo de ejecución.

Tailwind genera un archivo CSS estático a partir de las clases que detecta en tu proyecto. Eso evita depender de una librería de estilos que tenga que correr en el navegador para funcionar.

Proceso por el que Tailwind detecta qué utilidades estás usando.

Tailwind revisa archivos como HTML, JSX, Astro o plantillas para encontrar nombres de clase. Con esa información genera solo las utilidades necesarias para el proyecto.

Paso donde Tailwind genera el CSS final.

Es el proceso de compilación que toma tu CSS de entrada, analiza las clases encontradas en el proyecto y produce un archivo de salida listo para producción.

Herramienta oficial de línea de comandos para compilar Tailwind.

La CLI permite instalar y ejecutar Tailwind sin depender de un framework concreto. Es útil para HTML plano, pruebas controladas y para entender el flujo real de generación del CSS.

Integración moderna para proyectos React, Vue, Svelte o Astro.

Cuando el proyecto ya usa Vite, Tailwind se integra con el plugin oficial y se apoya en el bundler para desarrollo con recarga rápida y build de producción.

Modo observador que recompila automáticamente al detectar cambios.

Se usa normalmente con la CLI para evitar lanzar el comando manualmente en cada edición. Mientras el proceso siga vivo, Tailwind regenera el CSS cada vez que cambias archivos relevantes.

Punto de entrada CSS recomendado en Tailwind v4.

En v4, la forma estándar de cargar Tailwind dentro de tu CSS es con `@import "tailwindcss";`. Desde ahí se inyectan estilos base, tema y utilidades.

Directiva v4 para indicar rutas adicionales de escaneo.

En Tailwind v4 puedes usar `@source "../otro-directorio"` dentro de tu CSS para que el motor escanee archivos fuera de la detección automática. Es especialmente útil en monorepos o cuando las clases se generan dinámicamente desde rutas no convencionales.

Directiva para definir tokens de diseño en Tailwind v4.

Permite declarar variables para colores, fuentes, breakpoints u otros tokens directamente en CSS. Tailwind genera tanto las utilidades como las variables CSS nativas correspondientes, sin depender del viejo `tailwind.config.js` para lo básico.

Propiedades personalizadas nativas que Tailwind expone desde v4.

Todo lo que declares en `@theme` queda disponible como variable CSS con el prefijo `--color-*`, `--font-*`, etc. Esto significa que puedes consumir los mismos tokens en JavaScript, componentes sin Tailwind o incluso hojas de estilo externas, sin duplicar valores.

Directiva para registrar utilidades personalizadas.

Sirve para crear una clase global nueva cuando Tailwind no trae una utilidad exacta para lo que necesitas. La ventaja es que esa utilidad sigue participando del ecosistema de variantes como `hover:` o `md:`.

Directiva v4 para registrar variantes personalizadas.

Con `@variant` puedes definir modificadores propios que se comporten como `hover:` o `dark:`. Es útil cuando necesitas variantes basadas en atributos, clases de tu framework o selectores complejos que no existen en Tailwind por defecto.

Escape hatch para aplicar utilidades dentro de un bloque CSS.

Permite componer utilidades de Tailwind en una regla CSS tradicional: `@apply flex items-center gap-2;`. Es útil para integrar con frameworks de componentes o estilos globales, pero conviene usarlo con moderación porque rompe la trazabilidad del utility-first.

Valores reutilizables para mantener consistencia visual.

Son decisiones de diseño convertidas en variables: colores, escalas, tipografías, radios o espaciados. En Tailwind v4 suelen declararse con `@theme` para luego consumirlas mediante utilidades generadas y variables CSS nativas.

Valores escritos entre corchetes para casos puntuales.

Cuando una necesidad no existe en la escala del sistema, puedes usar clases como `top-[117px]` o `grid-cols-[1fr_500px_2fr]`. Son útiles, pero conviene no abusar para no romper la consistencia del diseño.

Adaptación de la interfaz a distintos tamaños de pantalla.

En Tailwind se resuelve con prefijos como `sm:`, `md:`, `lg:` o `xl:`. Las utilidades sin prefijo se aplican por defecto a móvil, y los prefijos sobreescriben el estilo desde cierto breakpoint.

Estrategia donde el estilo base se piensa para móvil primero.

Tailwind parte de un enfoque mobile-first. Eso significa que las clases sin prefijo representan el estado base, y luego usas variantes responsivas para escalar la interfaz a pantallas mayores.

Puntos de cambio donde el diseño adapta su comportamiento.

Son umbrales de pantalla como `sm`, `md`, `lg` o `xl`. En Tailwind se expresan como prefijos antes de la utilidad, por ejemplo `md:grid-cols-3`. En v4 se definen dentro de `@theme` con la clave `--breakpoint-*`.

Clase que limita el ancho del contenido y lo centra.

La utilidad `container` establece un `max-width` que coincide con el breakpoint actual. Combinada con `mx-auto` y `px-*` es el patrón estándar para centrar contenido y evitar líneas de texto excesivamente largas en pantallas grandes.

Sistema de layout para alinear y distribuir elementos en una dirección.

Tailwind expone Flexbox mediante utilidades como `flex`, `items-center`, `justify-between` o `gap-4`. Es la base de muchos headers, barras, tarjetas y alineaciones rápidas.

Sistema bidimensional para componer layouts más estructurados.

Con utilidades como `grid`, `grid-cols-3` o `col-span-2`, Tailwind permite organizar contenido en filas y columnas. Es especialmente útil para dashboards, galerías y composiciones más complejas.

Separación interna entre items de Flexbox o Grid.

La utilidad `gap-*` define espacio entre hijos dentro de contenedores `flex` o `grid`. También existen `gap-x-*` y `gap-y-*` para controlar ejes por separado. Es preferible a poner márgenes manuales cuando el objetivo es separar items de forma consistente.

Escala consistente que rige márgenes, padding, gap y tamaños.

Utilidades como `p-4`, `mt-6`, `gap-8` o `w-12` comparten la misma escala numérica. Esa consistencia hace más predecible el diseño y evita decisiones improvisadas en cada componente. En Tailwind v4 la escala base es 1 = 0.25rem (4px) y se puede extender desde `@theme`.

Sistema de color disponible mediante utilidades semánticas o de escala.

Tailwind ofrece escalas como `slate-900`, `sky-500` o `amber-400` para texto, fondo, borde y sombras. En v4 los colores se expresan en OKLCH internamente, lo que mejora la uniformidad perceptual al mezclar o interpolar tonos. Puedes redefinir o ampliar la paleta con `@theme`.

Control de tamaño, peso, interlineado y estilo del texto.

Tailwind resuelve la tipografía con utilidades como `text-sm`, `font-semibold`, `leading-relaxed` o `tracking-wide`. Entender esta capa es esencial para interfaces legibles y jerarquías claras. Para bloques de texto largo (artículos, documentación) existe el plugin `@tailwindcss/typography` que aporta la clase `prose`.

Clase del plugin Typography para estilizar HTML generado por Markdown.

El plugin `@tailwindcss/typography` añade la clase `prose` que aplica estilos editoriales consistentes a bloques de HTML arbitrario: encabezados, párrafos, listas, código y más. Es la solución estándar para contenido renderizado desde Markdown o CMS.

Suaviza el cambio entre un estado y otro.

La utilidad `transition` habilita transiciones CSS en las propiedades más comunes (color, fondo, borde, opacidad, sombra, transform). Se combina con `duration-*` para controlar la duración y `ease-*` para la curva de aceleración. Casi siempre va acompañada de una variante como `hover:` o `focus:`.

Controlan velocidad y curva de aceleración de una transición.

`duration-200` establece que la transición dura 200ms; `ease-in-out` define que empiece y termine de forma suave. Ajustar ambos valores es la diferencia entre una UI que parece reactiva y una que se siente lenta o mecánica.

Clases para animaciones CSS declarativas incluidas en Tailwind.

Tailwind incluye animaciones preconstruidas como `animate-spin`, `animate-pulse`, `animate-bounce` o `animate-ping`. Para animaciones personalizadas puedes registrar keyframes y la animación completa desde `@theme` en v4.

Variante que aplica estilos alternativos para modo oscuro.

Con el prefijo `dark:` puedes cambiar colores, fondos o bordes cuando el documento está en modo oscuro. Es una de las variantes más usadas porque no requiere reescribir el componente completo.

Prefijos que condicionan cuándo se aplica una utilidad.

Son modificadores como `hover:`, `focus:`, `dark:` o `md:`. Pueden apilarse entre sí: `dark:hover:bg-slate-700` aplica el fondo solo en modo oscuro y al pasar el puntero. Tailwind v4 permite crear variantes propias con `@variant`.

Estado interactivo cuando el puntero pasa sobre un elemento.

En Tailwind se representa con el prefijo `hover:`. Es común en botones, links, tarjetas y cualquier elemento que necesite respuesta visual al pasar el mouse. Para el estado de presión inmediata usa `active:`, y para navegación con teclado usa `focus:` o `focus-visible:`.

Estado activo de un elemento que recibe foco de teclado o interacción.

La variante `focus:` se usa para accesibilidad y navegación con teclado. La variante `focus-visible:` es más precisa: solo aplica cuando el foco proviene del teclado, no del clic con mouse, lo que evita estilos de foco no deseados visualmente.

Patrón para estilizar hijos según el estado de un padre.

Añades la clase `group` al contenedor y luego usas variantes como `group-hover:` en los hijos. Esto permite coordinar interacciones entre varios elementos sin CSS personalizado.

Patrón para estilizar un elemento según el estado de un hermano.

Con `peer` y variantes como `peer-invalid:` o `peer-checked:` puedes reaccionar al estado de otro elemento vecino, especialmente útil en formularios y componentes interactivos.

Aro visual de foco o énfasis alrededor de un elemento.

Utilidades como `ring-2` o `focus-visible:ring-4` crean un borde exterior visual muy útil para accesibilidad y estados destacados. A diferencia de `border`, el ring no ocupa espacio en el layout y se puede colorear con `ring-color-*`.