Nuevas funciones de Tailwind CSS v4.0 - Rendimiento 10 veces mayor

Lanzamiento de Tailwind CSS v4.0

Tailwind CSS v4.0 fue lanzado a principios de 2025. Renovó por completo la arquitectura interna, logrando una velocidad de compilación hasta 10 veces más rápida. La configuración basada en variables CSS permite una personalización más flexible.

Nota: v4.0 incluye cambios con ruptura de compatibilidad, pero se proporciona una herramienta de migración automática. La migración de proyectos existentes se puede realizar de manera relativamente fluida.

Cambios principales

1. Motor Oxide - Nueva arquitectura basada en Rust

Migración del plugin PostCSS a un nuevo motor escrito en Rust. Esto logra una mejora significativa del rendimiento.

Utiliza Lightning CSS internamente para procesar rápidamente prefijos de vendor, transformación de sintaxis y compresión.

2. Configuración CSS-first

Ya no se necesita tailwind.config.js. Ahora puedes configurar directamente en archivos CSS.

/* app.css */
@import "tailwindcss";

/* Personalización del tema */
@theme {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --font-sans: "Inter", sans-serif;
  --breakpoint-3xl: 1920px;
}

/* Utilidades personalizadas */
@utility scroll-snap-x {
  scroll-snap-type: x mandatory;
}

3. Tema con variables CSS

Todos los design tokens se exportan como variables CSS. Es posible cambiar el tema dinámicamente sin JavaScript.

/* Variables CSS generadas por Tailwind */
:root {
  --color-blue-500: #3b82f6;
  --spacing-4: 1rem;
  --font-size-lg: 1.125rem;
}

/* Cambiar tema dinámicamente con JavaScript */
document.documentElement.style.setProperty('--color-primary', '#ef4444');

4. Nuevas utilidades

Se agregaron numerosas nuevas clases de utilidad.

<!-- Container Queries -->
<div class="@container">
  <div class="@lg:flex @lg:gap-4">
    Estilos según el tamaño del contenedor
  </div>
</div>

<!-- Subgrid -->
<div class="grid grid-cols-3">
  <div class="col-span-2 grid grid-cols-subgrid">
    Hereda los grid tracks del padre
  </div>
</div>

<!-- text-wrap -->
<h1 class="text-balance">Saltos de línea balanceados</h1>
<p class="text-pretty">Saltos de línea más estéticos</p>

<!-- 3D Transforms -->
<div class="rotate-x-45 rotate-y-12 perspective-500">
  Transformación 3D
</div>

5. Detección automática de contenido

Ya no se necesita la configuración de content. Detecta automáticamente los archivos del proyecto.

/* v3.x - Requería configuración manual */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './public/index.html'
  ]
}

/* v4.0 - Detección automática (sin configuración) */
/* Escanea automáticamente archivos no ignorados por gitignore */

Guía de migración

Migración automática

# Herramienta de actualización automática
npx @tailwindcss/upgrade

Cambios principales

Utilidades eliminadas

• *-opacity-* - Unificado a notación con barra
• flex-grow - Unificado a grow
• flex-shrink - Unificado a shrink
• overflow-ellipsis - Unificado a text-ellipsis

Nuevo método de instalación

Proyecto Vite

# Instalación
npm install tailwindcss@next @tailwindcss/vite

// vite.config.js
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()]
}

/* CSS */
@import "tailwindcss";

Resumen

Tailwind CSS v4.0 ha evolucionado significativamente tanto en rendimiento como en DX. Puntos principales:

• 10 veces más rápido: Nuevo motor basado en Rust
• CSS-first: Sin archivos de configuración, todo en CSS
• Variables CSS: Cambio dinámico de tema más fácil
• Nuevas utilidades: Container Queries, Subgrid, etc.

Hay costos de migración, pero con la herramienta de migración automática la transición es relativamente fluida. Para nuevos proyectos usa v4.0, para proyectos existentes planifica una migración gradual.