Tailwind CSS v4.0 introduce un motor de compilación completamente nuevo escrito en Rust, acelerando los bucles de compilación hasta 10x. Además, pasa de un archivo de configuración basado en JavaScript (tailwind.config.js) a un enfoque CSS-first, donde las personalizaciones se definen dentro de tu hoja de estilo principal usando variables CSS estándar.

Este artículo revisa los cambios principales en Tailwind CSS v4 y proporciona un recorrido práctico de migración para ayudarte a actualizar tus proyectos.

1. Cambios clave en Tailwind CSS v4

1) Motor “Oxide” impulsado por Rust

La característica definitoria de v4 es su compilador. Reesecrito en Rust, el motor Oxide procesa archivos de hoja de estilo significativamente más rápido que el antiguo motor basado en PostCSS. Esto se traduce en inicios de servidor de desarrollo casi instantáneos y sustitución de módulos en caliente (HMR), manteniendo a los desarrolladores en su flujo de trabajo.

2) Configuración CSS-first

En lugar de modificar un archivo tailwind.config.js, personalizas tu tema directamente en tus archivos CSS usando la nueva directiva @theme.

Ejemplo de configuración en v4 (sintaxis CSS)

@import "tailwindcss";

@theme {
  --color-brand-primary: #3b82f6;
  --color-brand-secondary: #10b981;
  --font-display: "Outfit", sans-serif;
}

El compilador analiza estas variables CSS y registra automáticamente las clases de utilidad correspondientes — como bg-brand-primary y font-display — durante el paso de compilación.

3) Sentencias de importación simplificadas

En lugar de definir tres directivas separadas (@tailwind base;, @tailwind components;, @tailwind utilities;), importas el paquete con una sola línea: @import "tailwindcss";.

2. Pasos prácticos de migración

Sigue estos pasos para actualizar un proyecto existente de Tailwind CSS v3 a v4.

Paso 1: Instalar dependencias

Ejecuta el comando para instalar el compilador actualizado y los paquetes de integración con PostCSS:

npm install tailwindcss@next @tailwindcss/postcss@next

Paso 2: Migrar la configuración a CSS

Mueve los colores, fuentes o pantallas personalizados definidos en tu tailwind.config.js a tu hoja de estilo global:

- // tailwind.config.js
- module.exports = {
-   theme: {
-     extend: {
-       colors: {
-         customGray: '#1e293b',
-       }
-     }
-   }
- }

+ /* global.css */
+ @import "tailwindcss";
+ @theme {
+   --color-custom-gray: #1e293b;
+ }

Paso 3: Actualizar la configuración de PostCSS

Actualiza el postcss.config.js de tu proyecto para que apunte al nuevo envoltorio del plugin de Tailwind CSS:

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

3. Nuevas clases de utilidad notables en v4

Con el lanzamiento de v4, varias utilidades de diseño nuevas son soportadas de forma nativa:

• Utilidades CSS Subgrid: Se incluyen clases estándar para facilitar la sincronización de cuadrículas (ej. grid-rows-subgrid y grid-cols-subgrid).
• Directivas de transformación 3D: Implementa rotaciones 3D, perspectiva y profundidad directamente en atributos HTML (ej. transform-3d, rotate-y-180).
• Soporte de Container Queries: Las Container Queries ya no requieren plugins externos. Los desarrolladores pueden usar la utilidad @container para aplicar estilos basados en dimensiones del contenedor padre en lugar de puntos de interrupción del viewport.

4. Conclusión: ¿deberías actualizar?

La mejora en la velocidad de compilación por sí sola hace que Tailwind CSS v4 sea una excelente actualización para la mayoría de los proyectos frontend. Combinar estándares CSS nativos con clases utility-first reduce la complejidad de configuración, ofreciendo un flujo de trabajo más limpio para el diseño web moderno.