How to Use Tailwind v4 in Laravel 12 While Keeping Tailwind v3 for Filament v3 (Using Vite Separation)

using-tailwind-v4-in-laravel12-with-filament-v3.md

🚀 How to Use Tailwind v3 for Filament v3 While Keeping Tailwind v4 in Laravel 12 (Using Vite Separation)

Problem: Laravel 12 supports Tailwind CSS v4, but Filament v3 is tied to Tailwind v3. Using both together can cause conflicts.

This guide shows how I solved the problem by isolating Filament’s frontend stack — with its own Tailwind v3, Vite config, and PostCSS config — separate from the Laravel app, which uses Tailwind v4.

---

🛠️ Step-by-Step Solution

1. 📦 Install Tailwind v4 and v3

I alias Tailwind v4 as tailwindcss4 for Laravel and keep the default tailwindcss (v3) for Filament.

Install Tailwind v3 (for Filament)

bun install -D tailwindcss@^3 @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer

Install Tailwind v4 (for Laravel)

bun install -D tailwindcss4@npm:tailwindcss@^4

---

2. 🎨 Create a Custom Filament Theme

php artisan make:filament-theme --pm=bun

Reorganize the generated files into a custom structure

Folder structure:

resources/
├── css/
│   └── app.css                   # Laravel (Tailwind v4)
├── filament/
│   ├── admin/
│   │   ├── css/
│   │   │   └── theme.css         # Filament (Tailwind v3)
│   │   ├── js/
│   │   │   └── theme.js          # Optional custom JS
│   ├── postcss.config.js         # PostCSS config for Tailwind v3
│   ├── tailwind.config.js        # Tailwind config for Filament
│   └── vite.config.js            # Vite config just for Filament

Update resources/css/app.css to use the alias tailwindcss4

@import 'tailwindcss4';

Fix the path of tailwind @config in resources/filament/admin/css/theme.css, Also place @import in the top of file

@config '../../tailwind.config.js';

Fix the path of importing filament preset configurations in resources/filament/tailwind.config.js

import preset from '../../vendor/filament/filament/tailwind.config.preset'

Create resources/filament/vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            hotFile: 'public/filament.hot', // will used for hot reload with (bun run fi-dev)
            buildDirectory: 'fi-build',     // to separate manifest.json
            input: [
                'resources/filament/admin/css/theme.css',
                // 'resources/filament/admin/js/theme.js',   // optional
            ],
            refresh: true,
        }),
    ],
    css: {
        postcss: 'resources/filament/postcss.config.js',
    },
});

Create resources/filament/postcss.config.js

export default {
  plugins: {
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    autoprefixer: {},
  },
}

---

3. 🔧 Add Script Commands In package.json For Filament Themes

Update package.json by adding fi-build and fi-dev to scripts

{
  "scripts": {
    "fi-build": "vite build --config resources/filament/vite.config.js",
    "fi-dev": "vite --config resources/filament/vite.config.js",
    "build": "vite build",
    "dev": "vite"
  },
}

---

4. 🧪 Create a Middleware to Use Filament Hot File and Build Directory

We need to tell laravel vite to use the hot file filament.hot and buil directory fi-build

php artisan make:middleware UseViteForFilament

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Vite;
use Symfony\Component\HttpFoundation\Response;

class UseViteForFilament
{
    public function handle(Request $request, Closure $next): Response
    {
        Vite::useHotFile('filament.hot')->useBuildDirectory('fi-build');

        return $next($request);
    }
}

---

5. 📥 Register Middleware and Theme in Filament Panel Provider

Update AdminPanelProvider.php by adding the created middleware in ->middleware() and theme style in ->viteTheme()

public function panel(Panel $panel): Panel
{
    return $panel
        ...
        ->middleware([
            ...
            \App\Http\Middleware\UseViteForFilament::class,
        ])
        ->viteTheme('resources/filament/admin/css/theme.css'); // Optional
}

---

6. 🧹 Add Build Files to .gitignore

# Filament-specific Vite output
/public/fi-build
/public/filament.hot

---

🚀 How to Run

👉 Run Laravel (Tailwind v4)

bun run dev       # Start Vite in dev mode
bun run build     # Build for production

👉 Run Filament Theme (Tailwind v3)

bun run fi-dev    # Start Vite for Filament theme (with hot reload)
bun run fi-build  # Build Filament theme for production

✅ You can run both dev and fi-dev in separate terminal tabs for full development experience.

---

Summary

Laravel App (Tailwind v4)	Filament Panel (Tailwind v3)
Uses tailwindcss4 alias	Uses tailwindcss
Standard Vite config	Custom resources/filament/vite.config.js
No PostCSS config	Scoped PostCSS config
Hot reload: public/hot	Hot reload: public/filament.hot
Build dir: public/build	Build dir: public/fi-build

Followed each step. Filament builds alright but the frontend now has an issue. See the screenshot.

Followed each step. Filament builds alright but the frontend now has an issue. See the screenshot.

This guide for fresh installation of laravel 12 which ships with tailwindcss v4 pre-configured, please make sure that the root vite.config.js is configure propebly for tailwindcss v4 with the new tailwindcss() plugin.
And there should no postcss.config.js file in the root of you project.

postcss.config.js in the root was the problem.

Thank you.

Thank you so much for sharing this ! 🙏