Migrar de Tailwind CSS 3 a 4

Tailwind CSS
Solucionex
16
Abr 25

Para migrar un proyecto a Tailwind CSS 4, existe la upgrade guide oficial, que propone una serie de pasos claros y bien estructurados para realizar el proceso de manera rápida y eficaz. 

Lo primero es actualizar el paquete de Tailwind a la nueva versión, junto con sus dependencias relacionadas. 

npx tailwindcss migrate

Lanzando este comando se escanea el proyecto, actualiza el archivo tailwind.config.js con la nueva sintaxis y elimina configuraciones obsoletas. También adapta los estilos donde detecta uso de utilidades que ya no son compatibles. Es una forma rápida y segura de iniciar el proceso. Es necesario node v20, así que es imprescindible asegurarse de que está actualizado antes de empezar.

Una de los grandes cambios que trae consigo la actualización es que el archivo tailwind.config.js desaparece. Toda esa configuración debe trasladarse a CSS, incluidos los plugins, que también deben importarse directamente en la hoja de estilos.

Plugins

@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

Theme

@theme {
  --font-sans: "Poppins", "Arial", "sans-serif";
  --color-primary: oklch(57.36% 0.1326 247.63);
  --color-secondary: oklch(68.7% 0.1902 132.15);
}

Utilidades

Algunas líneas deben ser convertidas a nuevas utilidades para poder utilizarse. Por ejemplo:

@utility grid-cols-25-50-25 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}

Migrar a Tailwind CSS 4 es una oportunidad para optimizar y modernizar el código. Con la herramienta de migración oficial el proceso resulta muy sencillo. Las mejoras en rendimiento, una base sólida para el futuro y una experiencia de desarrollo más fluida son una buena excusa para lanzarse a la migración.

tailwindCSS