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

Not sure what i am doing wrong here.
npm run build
Error below :
vite v6.3.5 building for production...
✓ 1 modules transformed.
✗ Build failed in 2.78s
error during build:
[@tailwindcss/vite:generate:build] Can't resolve 'index.css' in '/var/www/kijani-backend/vendor/filament/filament/resources/css'
file: /var/www/kijani-backend/resources/filament/admin/css/theme.css

Other error
npm run fi-build

fi-build
vite build --config resources/filament/vite.config.js

vite v6.3.5 building for production...
✓ 1 modules transformed.
✗ Build failed in 22ms
error during build:
[vite:css] Failed to load PostCSS config (searchPath: resources/filament/postcss.config.js): [SyntaxError] Identifier '.default' has already been declared

structure is tree

.
├── css
│   └── app.css
├── filament
│   ├── admin
│   │   ├── css
│   │   │   └── theme.css
│   │   └── js
│   │   └── theme.js
│   ├── postcss.config.js
│   ├── tailwind.config.js
│   └── vite.config.js

theme.css full contents

@import '../../../../vendor/filament/filament/resources/css/theme.css';

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

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',
            ],
            refresh: true,
        }),
    ],
    css: {
        postcss: 'resources/filament/postcss.config.js',
    },
});