¿Qué es Tailwind CSS?

Tailwind CSS es un framework de CSS que funciona con un enfoque radicalmente diferente al de frameworks como Bootstrap o Foundation. En lugar de darte componentes prediseñados (botones, tarjetas, modales), Tailwind te entrega un conjunto masivo de clases de utilidad de bajo nivel con las que puedes construir cualquier diseño directamente en tu HTML, sin escribir CSS personalizado.

El resultado es un sistema donde cada clase hace exactamente una cosa: text-center centra el texto, bg-blue-500 aplica un fondo azul de intensidad 500, px-4 añade padding horizontal de 1rem. Combinas estas pequeñas piezas para construir interfaces complejas.

La filosofía utility-first

La filosofía utility-first (utilidad primero) es el corazón de Tailwind. Rompe con la mentalidad tradicional de "separar HTML de CSS" para proponer que el estilo forme parte directa de la estructura.

CSS tradicional y BEM

Con CSS tradicional, defines clases semánticas y luego las estilizas:

/* styles.css */
.card {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 1.5rem;
}

.card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

BEM (Block Element Modifier) agrega estructura, pero el problema central persiste: debes mantener sincronizados dos archivos (HTML y CSS), inventar nombres de clases constantemente y lidiar con conflictos de especificidad a medida que el proyecto crece.

La propuesta de Tailwind

Con Tailwind, el HTML describe tanto la estructura como el estilo en un único lugar:

<div class="bg-white rounded-lg shadow-md p-6">
  <h2 class="text-xl font-bold text-gray-900">Título</h2>
</div>

Al principio esto puede parecer "CSS en línea disfrazado", pero hay diferencias cruciales:

Las utilidades de Tailwind operan dentro de un sistema de diseño consistente (escala de espaciado, paleta de colores, tipografía).
Tienen soporte nativo para variantes como hover:, focus:, sm:, dark:.
El CSS resultante es extremadamente pequeño porque Tailwind elimina todo lo que no usas.

¿Por qué no CSS/BEM tradicional?

El problema de la nombra de clases

Inventar nombres de clases es sorprendentemente costoso en tiempo mental. ¿Cómo llamas a un contenedor que contiene una lista de tarjetas de usuarios que pueden ser seleccionadas? ¿user-card-list? ¿selectable-user-grid? Con Tailwind este problema desaparece porque las clases son descriptivas por sí mismas.

El CSS no para de crecer

En proyectos grandes, el CSS tiende a crecer indefinidamente. Nadie borra CSS por miedo a romper algo. Tailwind resuelve esto de raíz: si un elemento no existe en tu HTML, sus utilidades no se incluyen en el CSS final.

Consistencia del diseño

Cuando cada desarrollador escribe su propio CSS, las inconsistencias se acumulan. Un desarrollador usa padding: 12px, otro padding: 0.75rem, un tercero padding: 13px. Con la escala de Tailwind, todos usan p-3 y el resultado es idéntico.

Tailwind v4 vs v3: ¿qué cambió?

Tailwind v4 es una reescritura mayor que introduce el motor Oxide y un enfoque CSS-first. Los cambios más importantes son:

1. No más `tailwind.config.js`

En v3, toda la configuración vivía en tailwind.config.js:

// tailwind.config.js (v3 — ya no se usa en v4)
module.exports = {
  content: ['./src/**/*.html'],
  theme: {
    extend: {
      colors: { brand: '#ff530f' }
    }
  }
}

En v4, configuras directamente en tu CSS:

/* styles.css (v4) */
@import "tailwindcss";

@theme {
  --color-brand: #ff530f;
  --font-sans: 'Inter', sans-serif;
}

2. El motor Oxide

Oxide es el nuevo motor de compilación de Tailwind v4, escrito en Rust. Es 5-10 veces más rápido que el motor anterior en compilaciones completas y aún más rápido en compilaciones incrementales (modo watch). Esto se traduce en Hot Module Replacement casi instantáneo durante el desarrollo.

3. CSS-first configuration

La directiva @theme permite definir tokens de diseño como variables CSS nativas. Esto significa que tus tokens están disponibles no solo para Tailwind, sino también para cualquier CSS personalizado que escribas, manteniendo consistencia en todo el proyecto.

4. Detección automática de contenido con `@source`

En v3 debías configurar content: ['./src/**/*.html'] explícitamente. En v4, la detección de contenido es automática para los casos más comunes. Cuando necesitas personalización, usas @source:

@source "../components/**/*.tsx";

5. Nuevas utilidades y variantes

Tailwind v4 añade soporte nativo para:

Variante in-* (similar a group-* pero para ancestros arbitrarios)
Variante starting: para animaciones de entrada CSS
@starting-style como utilidad
Mejoras en contenedores con @container queries

El ecosistema de Tailwind

Tailwind no existe en aislamiento. Tiene un ecosistema rico que lo hace aún más poderoso:

Plugins oficiales

@tailwindcss/typography: Añade la clase prose para estilizar contenido HTML generado (artículos, documentación, markdown renderizado).
@tailwindcss/forms: Resetea los estilos predeterminados de formularios para que sean fáciles de estilizar con utilidades.
@tailwindcss/aspect-ratio: Utilidades para controlar la relación de aspecto (obsoleto en parte desde que CSS añadió aspect-ratio nativo).

Integración con frameworks

Tailwind funciona con cualquier stack: Angular, React, Vue, Svelte, Laravel, Rails, Next.js, Nuxt. La integración con Vite (usado por Angular, React y Vue modernos) es especialmente eficiente gracias al plugin @tailwindcss/vite.

Tailwind UI

Tailwind UI es la biblioteca de componentes premium creada por el equipo de Tailwind Labs. Ofrece cientos de componentes y plantillas listos para usar, todos implementados con utilidades de Tailwind puro, lo que los hace fácilmente personalizables.

¿Cuándo usar Tailwind?

Tailwind brilla especialmente en estos contextos:

Proyectos donde el diseño se construye de cero: No estás limitado por los componentes de otro framework.
Equipos con un sistema de diseño propio: Los tokens de @theme mapean perfectamente a variables de design tokens.
Aplicaciones con mucha variedad visual: Cuando necesitas layouts muy específicos que serían difíciles de expresar con componentes genéricos.
Proyectos que priorizan el rendimiento: El CSS final es mínimo, solo lo que realmente usas.

Tailwind puede no ser la mejor opción si necesitas componentes complejos listos para usar sin customización, o si tu equipo prefiere la separación estricta de HTML y CSS.

Resumen

Tailwind CSS v4 representa una evolución significativa del framework: más rápido gracias al motor Oxide, más simple gracias a la configuración CSS-first, y más poderoso con nuevas utilidades y variantes. Su filosofía utility-first, que inicialmente puede parecer contraintuitiva, resulta en un flujo de trabajo más rápido, código más consistente y bundles CSS más pequeños. En las siguientes lecciones aprenderás a instalarlo, configurarlo y dominarlo.