Tailwind CSS v4: adiós al archivo de configuración

Uno de los cambios que más agradecemos en nuestros proyectos del último tiempo: con Tailwind CSS v4, el archivo tailwind.config.js dejó de ser el centro del universo.

Configuración directa en CSS

Antes, para añadir un color de marca había que exportar un objeto de JS, reiniciar el server, rezar. Ahora el tema vive en tu CSS:

@import "tailwindcss";

@theme {
  --color-brand-teal: hsl(178 62% 42%);
  --font-sans: "Plus Jakarta Sans", sans-serif;
}

Con esas dos líneas ya existía bg-brand-teal y font-sans. Sin plugins, sin un tailwind.config.js, sin archivos separados.

¿Y el dark mode?

Otro cambio clave: dark: ahora se ancla por defecto a prefers-color-scheme. Si querés el toggle manual, lo definís en una línea:

@custom-variant dark (&:where(.dark, .dark *));

Y lo ideal para equipos es además el patrón de tokens semánticos: definir --background, --foreground, --card, etc. como variables en :root/.dark y mapearlas con @theme inline. Nuestro design system lo trabaja así, y el dark mode termina siendo automático porque los tokens ya responden al tema activo.

La detección automática de fuentes

Otra joya silenciosa: ya no hay directorio de contenido que mantené a mano. Tailwind v4 escanea de forma automática y detecta clases en archivos del proyecto. Solo hay que tener cuidado en monorepos donde hay código compartido fuera del directorio de la app. En Hexadevs usamos exactamente esto para conectar nuestro paquete de componentes compartidos:

@source "../../../../packages/ui/src";

Con esa línea se incluye nuestro paquete de componentes como fuente de escaneo.

¿Vale la pena migrar?

Si estás en v3 con config gigante, la migración es un fin de semana tranquilo (el CLI de migración ayuda con la mitad del trabajo). Beneficios concretos: builds 5x más rápidos con el motor oxide, CSS más pequeño en bundles grandes, y una forma de trabajar el diseño que le da sentido de nuevo.

Si empiezas un proyecto: v4 desde el arranque, sin dudarlo.