Tailwind CSS v4: todo lo que cambia y por qué importa

Tailwind CSS v4 llegó con cambios más profundos de lo que muchos esperaban. No es una actualización incremental — es prácticamente una reescritura del motor central. Después de usarlo en este mismo portfolio, aquí van mis notas.

El cambio más grande: adiós a tailwind.config.js

Durante años, la configuración de Tailwind vivía en un archivo tailwind.config.js. Ahí definías colores, fuentes, breakpoints, plugins… todo en JavaScript.

En v4, eso desaparece. La configuración ahora vive directamente en tu CSS:

@import "tailwindcss";

@theme {
  --color-brand-500: #3b82f6;
  --font-sans: 'Inter', sans-serif;
}

¿Por qué es mejor? Porque tu CSS ya no depende de un archivo de configuración externo. El tema está en el mismo lugar que los estilos. Y como son variables CSS nativas, puedes leerlas y modificarlas con JavaScript si lo necesitas.

El plugin de Vite reemplaza a PostCSS

Antes necesitabas configurar PostCSS para que Tailwind procesara tu CSS:

// postcss.config.js (ya no necesario en v4)
module.exports = {
  plugins: { tailwindcss: {}, autoprefixer: {} }
}

En v4, usas el plugin oficial de Vite:

// astro.config.mjs
import tailwindcss from '@tailwindcss/vite';

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

El resultado es un procesado significativamente más rápido porque aprovecha el pipeline de transformaciones de Vite en lugar de añadir un paso de PostCSS separado.

Los plugins también cambian

En v4, los plugins de Tailwind se registran en CSS, no en el archivo de configuración:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

Así de simple. Sin arrays en tailwind.config.js, sin imports en JavaScript.

Detección automática de contenido

En v3, tenías que decirle a Tailwind dónde buscar clases:

// tailwind.config.js v3
content: ['./src/**/*.{astro,html,js,ts}']

En v4, esto es automático. El plugin de Vite sabe exactamente qué archivos está procesando y detecta las clases usadas sin configuración adicional.

¿Vale la pena migrar?

Si estás empezando un proyecto nuevo: sí, usa v4 desde el principio. Es más simple, más rápido y la configuración en CSS es más coherente.

Si tienes un proyecto existente en v3: la guía oficial de migración es bastante clara, pero hay que revisar si tus plugins de terceros son compatibles con v4.

---

En resumen: Tailwind v4 es Tailwind pero más rápido, más simple y con menos archivos de configuración. Una mejora sólida.