Tailwind CSS v4.0 ya está aquí y viene con grandes mejoras en rendimiento, configuración más sencilla y soporte para las características más modernas de CSS. Esta nueva versión es rápida, flexible y sin tiempo de ejecución.
Características y novedades
Veamos las novedades más importantes y por qué es interesante actualizarla.
1. Rendimiento Optimizado
- Compilación Más Rápida: Ofrece tiempos de compilación hasta 10 veces más rápidos en comparación con la versión anterior.
- Reducción de Tamaño: consiguiendo un proyecto un 35% más ligero.
2. Simplificación de la Configuración
- Menos dependencias en la configuración inicial.
- Ajustes más intuitivos para personalizar Tailwind.
3. Soporte para Funcionalidades Modernas de CSS
- Capas Nativas de CSS: Ahora se utilizan reglas
@layer
reales y se ha introducido @utility para crear utilidades personalizdas. - Propiedades personalizadas avanzadas: Soporte mejorado para
@property
, ideal para transiciones fluidas y efectos avanzados. - Consultas de contenedores: Variantes como
@min-*
y@max-*
permiten un control responsive potente.
4. Paleta de Colores Actualizada
- Paleta de Colores P3: La versión 4.0 introduce una paleta más rica y vibrante gracias al soporte para el espacio de color P3. Esto se traduce en colores más vivos y precisos en pantallas compatibles.
Migración
Actualizar a la v4.0 es sencillo. Si ya se dispone de una versión anterior existen herramientas para facilitar el proceso:
- Una herramienta de migración que automatiza los cambios.
- Una guía oficial que describe los pasos necesarios para actualizar proyectos a la nueva versión, con los consiguientes cambios en la configuración y en las clases de utilidad.
tailwindCSS