2 min read

Upgrading Laravel 11.x to Tailwind CSS v4

#laravel #tailwind #tailwind-v4 #vite #devcontainer #traefik #docker #docker compose

Run this command from your workspace folder. Requires Node.js 20 or higher.

npx @tailwindcss/upgrade

Update your app.css file.

Modify your app.css to include the Blade views folder:

resources/css/app.css
@import 'tailwindcss';
 
@plugin '@tailwindcss/forms';
 
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
+ @source '../views/*.blade.php';
 
// .. the rest of the file

Fix VSCode Warning for Unknown at rule

If VSCode complains about Unknown at rule for @theme, @plugin, @source, install the Tailwind CSS IntelliSense extension and add the following setting:

"files.associations": {
    "*.css": "tailwindcss"
}

Update vite.config.js for the New Vite Plugin

Run the following commands to update your configuration:

rm postcss.config.js
npm uninstall postcss
npm -i --save-dev @tailwindcss/vite

Modify your vite.config.js file:

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

Enable HMR When Using Docker or Traefik

If you’re using Docker or Traefik as a gateway, update vite.config.js to ensure the HMR module works:

vite.config.js
export default defineConfig({
    plugins: [
        tailwindcss(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
+     server: {
+         hmr: {
+             host: 'localhost'
+         },
+     },
});

Note: you don’t need to expose port 5173 from Docker Compose file.

That’s it! Your Laravel 11.x project is now upgraded to Tailwind v4, powered by the new Vite plugin. 🚀