Updating Laravel & Inertia Setup with Tailwind 4: A Comprehensive Guide

Are you experiencing issues while upgrading to Tailwind 4 in your Laravel and Inertia project? This guide will walk you through a smooth transition, addressing common pitfalls and providing step-by-step instructions.

Pre-Update Cleanup

Before starting, take these crucial preparatory steps:

1. Remove Old Dependencies:
   • Open your package.json
   • Delete both tailwindcss and postcss dependency lines
   • This prevents version conflicts during the update
2. Verify Vite Configuration: Ensure your vite.config.js looks clean and simple:

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

Important: Do not import Tailwind directly in this file.

Installation Steps

Step 1: Install New Dependencies

> npm i -D tailwindcss @tailwindcss/postcss

Step 2: Update PostCSS Configuration

Modify your postcss.config.js:

export default {
    plugins: {
        "@tailwindcss/postcss": {},
        autoprefixer: {},
    },
};

Step 3: Update CSS Imports

In your resources/css/app.css, use the new import syntax:

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

Step 4: Blade Template Integration

Include your CSS in Laravel Blade templates:

@vite(['resources/css/app.css'])

Or for more complex setups:

@vite(
    [ 'resources/css/app.css',
      'resources/js/app.jsx',   
      "resources/js/Pages/{$page['component']}"
    ])

Step 5: Restart Development Server

> npm run dev

Bonus: VSCode Configuration

For developers using VSCode, enhance Tailwind CSS autocompletion by adding to settings.json:

{
    "files.associations": {
        "*.css": "tailwindcss"
    },
    "editor.quickSuggestions": {
        "strings": "on"
    }
}

Troubleshooting

If you encounter the error [@tailwindcss/vite:generate:build] Can't resolve 'tailwindcss', double-check that you’ve:

• Completely removed old Tailwind dependencies
• Installed the new packages correctly
• Restarted your development server

Compatibility Note

This guide works for both React and Vue implementations with Laravel and Inertia.

Final Thoughts

Upgrading dependencies can be tricky, but following these steps should provide a smooth transition to Tailwind 4 in your Laravel project.

Happy coding! 🚀