Introducción
Tailwind CSS v4 es la versión más importante del framework. Con un motor completamente reescrito sobre CSS nativo y nuevas utilidades, cambia la forma de escribir estilos.
Motor CSS nativo
Tailwind v4 ya no necesita PostCSS y autoprefixer. Utiliza CSS nativo con @layer, @property y custom properties, lo que reduce la configuración y mejora el rendimiento.
Nuevas utilidades
Se añaden utilidades para container queries, animaciones con scroll, y nuevas variantes como @starting-style para animaciones de entrada.
Tema unificado
El sistema de tema se simplifica con @theme en CSS. Defines colores, fuentes y espaciados directamente en CSS sin necesidad de tailwind.config.js.
Rendimiento mejorado
El nuevo motor genera solo el CSS que usas, eliminando la necesidad de purge. Los builds son hasta 5 veces más rápidos que en v3.
Migración desde v3
La migración es mayoritariamente automática con la herramienta de upgrade. Algunos cambios en nombres de utilidades requieren atención manual.
Conclusión
Tailwind CSS v4 es un salto adelante en el diseño con CSS. En Vynta lo usamos como base para crear interfaces modernas y responsivas.