Cómo migrar de TailwindCSS v3 a v4 en un proyecto con Shadcn
Descubre cómo actualizar tu proyecto de TailwindCSS v3 a v4, los cambios más importantes y consejos prácticos para hacerlo sin dolores de cabeza.
Facu Guardia
¿Por qué migrar a TailwindCSS v4?
TailwindCSS v4 ya está aquí, y trae consigo mejoras significativas en rendimiento, configuración CSS-first y una mejor detección de fuentes.
Ahora es más rápido que el café del lunes por la mañana. ¡Hasta 8 veces más rápido en builds!
Además, olvídate de peleas con configuraciones infinitas: v4 hace magia directamente desde tu CSS.
Preparando el terreno para la migración
Primero, asegúrate de tener tu proyecto funcionando bien en v3.
- Haz un backup. No seas ese dev que dice ¿Qué podría salir mal?.
- Actualiza dependencias porque, bueno, la vida sigue y los paquetes también.
- Luego, instala TailwindCSS v4:
npm install tailwindcss@4.0.0.
¿Listo? Ahora corre npx tailwindcss upgrade y observa cómo Tailwind hace su magia.
Cambios clave en TailwindCSS v4
Aquí vienen los fuegos artificiales:
- Configuración CSS-first: Ahora configuras desde el CSS. Adiós tailwind.config.js, aunque aún puedes mantenerlo si eres nostálgico.
- Rendimiento mejorado: Builds 8 veces más rápidas.
- Container Queries: Ahora puedes diseñar en función del contenedor.
- Nuevo sistema de colores: Adiós RGB aburrido, hola OKLCH. Colores más vivos.
Adaptando Shadcn a TailwindCSS v4
Si usas Shadcn (porque claro, eres cool), aquí hay algunos ajustes:
- Actualiza app.css con las nuevas directivas @tailwind.
- Cambia la gestión de modo oscuro. Ahora usamos @media (prefers-color-scheme).
- Ajusta colores y fuentes con el nuevo sistema de variables CSS.
En fin, ¿vale la pena?
Migrar a TailwindCSS v4 es más fácil de lo que parece.
Con mejoras en rendimiento, nuevas utilidades y una configuración más simple, vale la pena dar el salto.
¿Ya hiciste la migración?