Tailwind CSS 4.0 - 10 veces más rápido con motor en Rust

Descripción general de Tailwind CSS 4.0

Tailwind CSS 4.0 adopta el nuevo motor “Oxide” escrito en Rust, mejorando significativamente la velocidad de compilación. Además, el método de configuración cambió a CSS-first, siendo más intuitivo.

Motor Oxide

Rendimiento asombroso

Comparación de velocidad de compilación:
- Tailwind 3.x: 500ms
- Tailwind 4.0: 50ms (10 veces más rápido)

Compilación incremental en modo watch:
- Tailwind 3.x: 100ms
- Tailwind 4.0: 5ms (20 veces más rápido)

Configuración CSS-first

En lugar del tradicional tailwind.config.js, la configuración se realiza directamente en CSS.

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

@theme {
  /* Paleta de colores */
  --color-primary: #3b82f6;
  --color-secondary: #10b981;

  /* Fuentes */
  --font-sans: "Inter", sans-serif;

  /* Espaciado */
  --spacing-18: 4.5rem;

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

Migración desde la configuración tradicional

// tailwind.config.js (tradicional)
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6'
      }
    }
  }
};

// app.css (Tailwind 4.0)
@theme {
  --color-primary: #3b82f6;
}

Nuevas clases de utilidad

Container queries

<div class="@container">
  <div class="@sm:flex @lg:grid @lg:grid-cols-3">
    <!-- El layout cambia según el tamaño del contenedor -->
  </div>
</div>

Transformaciones 3D

<div class="perspective-1000">
  <div class="rotate-x-45 rotate-y-30 translate-z-20">
    Elemento con transformación 3D
  </div>
</div>

Mejoras en gradientes

<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500
            via-30%">
  Control detallado de la posición del gradiente
</div>

Uso de CSS Custom Properties

@theme {
  --color-brand: oklch(65% 0.2 250);
  --color-brand-light: oklch(from var(--color-brand) calc(l + 20%) c h);
  --color-brand-dark: oklch(from var(--color-brand) calc(l - 20%) c h);
}

<button class="bg-brand hover:bg-brand-dark text-white">
  Botón con color de marca
</button>

Instalación y configuración

npm install tailwindcss@next @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite';

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

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

Puntos clave de migración

Resumen

Tailwind CSS 4.0 mejora la experiencia de desarrollo con una gran aceleración gracias al motor Rust y la configuración CSS-first. Puedes desarrollar sin preocuparte por el tiempo de compilación incluso en proyectos grandes.