Lanzamiento de Tailwind CSS v4 - 10 veces más rápido con nuevo motor basado en Rust

La revolución de Tailwind CSS v4

Tailwind CSS v4 es un lanzamiento mayor que representa un rediseño completo del framework. Con la adopción del nuevo motor “Oxide” escrito en Rust, el rendimiento de compilación ha mejorado drásticamente.

flowchart LR
    CSS["Entrada CSS<br/>(@import)"]
    Oxide["Oxide Engine<br/>(Rust)"]
    Lightning["Lightning CSS"]
    Content["Content Detection"]
    Output["Minified Output"]

    CSS --> Oxide --> Lightning
    Oxide --> Content
    Lightning --> Output

Comparación de rendimiento: v3: 1000ms -> v4: 100ms (10x más rápido)

Migración a configuración CSS-first

En v4, la configuración migró de archivos JavaScript a configuración basada en CSS:

/* v4: CSS-first configuration */
@import "tailwindcss";

@theme {
  /* Colores personalizados */
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --color-accent: #f59e0b;

  /* Fuentes personalizadas */
  --font-display: "Inter", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;

  /* Espaciado personalizado */
  --spacing-18: 4.5rem;
  --spacing-88: 22rem;

  /* Breakpoints personalizados */
  --breakpoint-3xl: 1920px;

  /* Animaciones personalizadas */
  --animate-fade-in: fade-in 0.5s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

Migración desde configuración v3

// v3: tailwind.config.js (método antiguo)
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      },
      fontFamily: {
        display: ['Inter', 'sans-serif'],
      },
    },
  },
}

// v4: Se puede convertir automáticamente a la configuración CSS anterior
// Migrar con el comando npx @tailwindcss/upgrade

Nuevas funciones destacadas

1. Container queries nativas

<!-- Container queries con soporte estándar -->
<div class="@container">
  <div class="@sm:flex @md:grid @lg:grid-cols-3">
    <!-- Layout según el tamaño del contenedor -->
    <div class="@sm:w-full @md:w-1/2 @lg:w-auto">
      Contenido
    </div>
  </div>
</div>

<!-- Contenedores con nombre -->
<div class="@container/sidebar">
  <div class="@md/sidebar:hidden">
    Responsivo específico para sidebar
  </div>
</div>

2. CSS Cascade Layers

/* Tailwind gestiona automáticamente los layers */
@layer theme, base, components, utilities;

/* Control de prioridad de estilos personalizados */
@layer components {
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded-lg;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

3. Utilidades de transformación 3D

<!-- Transformaciones 3D con soporte estándar -->
<div class="perspective-1000">
  <div class="rotate-x-45 rotate-y-30 translate-z-20">
    Contenido con transformación 3D
  </div>
</div>

<!-- preserve-3d mantiene la posición 3D de los hijos -->
<div class="transform-style-preserve-3d">
  <div class="rotate-y-180 backface-hidden">
    Parte trasera de flip card
  </div>
</div>

4. Nueva sintaxis de gradientes

<!-- Múltiples color stops -->
<div class="bg-linear-to-r from-blue-500 via-purple-500 via-50% to-pink-500">
  Fondo con gradiente
</div>

<!-- Gradiente radial -->
<div class="bg-radial from-white to-gray-200">
  Gradiente circular
</div>

<!-- Gradiente cónico -->
<div class="bg-conic from-red-500 via-yellow-500 to-red-500">
  Estilo rueda de colores
</div>

Comparación de rendimiento

Comparación de rendimiento de compilación (Proyecto grande con 10,000 archivos)

Integración de Lightning CSS

En v4, Lightning CSS está integrado por defecto, permitiendo las siguientes funciones:

/* Prefijos de vendor automáticos */
.element {
  user-select: none; /* Agrega automáticamente -webkit-user-select */
  backdrop-filter: blur(10px); /* Soporte Safari automático */
}

/* Conversión automática de sintaxis CSS moderna */
.container {
  /* Sintaxis anidada con soporte nativo */
  & .child {
    color: blue;

    &:hover {
      color: red;
    }
  }
}

/* Generación automática de fallback para variables CSS */
.text {
  color: oklch(70% 0.15 250); /* Convierte a rgb para navegadores no compatibles */
}

Detección de contenido sin configuración

Detección automática de contenido

v3 (requería configuración manual):

content: [
  './src/**/*.{js,ts,jsx,tsx}',
  './pages/**/*.{js,ts,jsx,tsx}',
  './components/**/*.{js,ts,jsx}',
]

v4 (detección automática):

@import "tailwindcss";
/* ¡Sin configuración necesaria! Escaneo automático */

Objetivos de detección: .html, .js, .jsx, .ts, .tsx, .vue, .svelte, .astro, .mdx, etc.

Uso de la herramienta de migración

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

# Contenido migrado:
# 1. Conversión de tailwind.config.js a CSS @theme
# 2. Actualización de configuración PostCSS
# 3. Optimización de directivas @apply
# 4. Reemplazo de clases obsoletas

# Ejemplo de configuración Vite
npm install tailwindcss@latest @tailwindcss/vite

// vite.config.ts
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});

Principales cambios con ruptura de compatibilidad

Perspectivas futuras

Tailwind CSS v4 mejora significativamente la experiencia del desarrollador mientras aprovecha al máximo las características de CSS moderno. El motor basado en Rust permite un desarrollo cómodo incluso en proyectos grandes.

Enlaces de referencia

• Anuncio oficial de Tailwind CSS v4.0
• Guía de migración
• Lightning CSS