Novedades de Tailwind CSS v4.0

Tailwind CSS
Solucionex
06
Feb 25

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