Tailwind v4: El Fin de la Abstracción Innecesaria

Tailwind CSS dividió a la comunidad frontend en dos posiciones irreconciliables. Sus defensores valoran la velocidad de prototipado y la consistencia que ofrecen las utilidades predefinidas. Sus detractores señalan la verbosidad del HTML resultante y la curva de aprendizaje de un vocabulario propietario. Tailwind v4 no resuelve ese debate, pero elimina uno de los argumentos más válidos en contra: la dependencia de un archivo de configuración JavaScript para definir el sistema de diseño.

La directiva @theme en v4 permite definir todos los tokens de diseño directamente en CSS. Los colores, tipografías, espaciados y breakpoints se declaran como custom properties estándar. Esta decisión tiene implicaciones profundas: el sistema de diseño deja de ser una abstracción de Tailwind y se convierte en CSS puro que cualquier herramienta del ecosistema puede consumir.

/* Tailwind v4: @theme reemplaza tailwind.config.js */
@theme {
  --color-void: #000000;
  --color-cyan: #00e5ff;
  --color-surface: #0a0a0a;
  --font-sans: "Geist", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

/* Se usan como utilidades automáticamente */
/* bg-void, text-cyan, font-sans — sin configuración adicional */

El rendimiento también mejora significativamente. El compilador de v4 usa Rust internamente (vía Lightning CSS), lo que reduce los tiempos de build de segundos a milisegundos. En mi proyecto actual con 41 páginas y más de 200 componentes únicos, el procesamiento de CSS completo toma menos de 50ms. Esa velocidad transforma la experiencia de desarrollo: los cambios de estilo se reflejan instantáneamente sin perceptible delay de HMR.

La adopción de Tailwind v4 en proyectos existentes requiere un cambio de mentalidad más que de código. Los equipos acostumbrados a editar tailwind.config.js deben migrar su pensamiento hacia CSS nativo. Ese movimiento, lejos de ser regresivo, representa una maduración del framework: las utilidades son la interfaz de consumo, pero la fuente de verdad vuelve a ser el estándar web. // BUILD_SYSTEM: OPTIMIZED