Actualización de Tailwind 3 a Tailwind 4 en Laravel Breeze

Usar el starter kit Laravel Breeze puede ser muy ventajoso en nuestros desarrollo debido a que nos crea un sistema de autenticación rápido y sencillo a la hora de realizar modificaciones, pero viene con la versión 3 de Tailwind CSS y puede que eso sea un inconveniendo sobre todo en proyectos recientes. 

Para simplificar el proceso, los chicos de taildwind han desarrollado una herramienta de migración que puede gestionar automáticamente la mayor parte de estos cambios en proyectos típicos.

#Usando la herramienta de actualización

Si deseas intentar actualizar un proyecto de v3 a v4, puede usar la herramienta de actualización para que haga la mayor parte del trabajo pesado por tí:

$ npx @tailwindcss/upgrade

La herramienta de actualización requiere Node.js 20 o superior, así que asegúrate de que tu entorno esté actualizado antes de ejecutarla.

Principales funciones de la herramienta de actualización:

• Revisa todos los archivos y reemplaza las clases de utilidad renombradas y obsoletas.
• Elimina el archivo tailwind.config.js y lo traslada a resources/css/app.css.
• Migra la configuración de PostCSS.
• Actualiza todos los paquetes.

Tras completar la actualización, recuerda ejecutar npm run dev o npm run build para ver los cambios. Como indica la herramienta, verifica todos los cambios antes de confirmarlos.

Opcionalmente, también puedes migrar a un plugin de Vite en lugar de usar PostCSS. Primero, instala el plugin de Vite.

npm install @tailwindcss/vite

A continuación, configure vite.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite'; 
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        tailwindcss(), 
    ],
});

Ahora puedes eliminar el archivo postcss.config.js y eliminar el paquete postcss.

npm uninstall postcss