cpereiraweb

🚀 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

cpereiraweb

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class CheckUserCompleteInfo
{

cpereiraweb

<?php

namespace App\Providers;

use Filament\Actions;
use Filament\Forms;
use Filament\Infolists;
use Filament\Notifications\Notification;
use Filament\Pages;
use Filament\Support\Enums\MaxWidth;

cpereiraweb

<?php

namespace App\Forms\Components;

use Closure;
use Filament\Forms\Components\Actions\Action;
use Filament\Forms\Components\Field;

class DropInAction extends Field
{

cpereiraweb

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The skeleton application for the Laravel framework.",
    "keywords": [
        "laravel",
        "framework"
    ],
    "license": "MIT",
    "require": {

cpereiraweb

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "php": "^8.0.2",
        "bezhansalleh/filament-shield": "^2.3",
        "filament/filament": "^2.0",

cpereiraweb

# -------------------------------------------------------------------------------------------
# ALIASES
# -------------------------------------------------------------------------------------------

# Brew
alias bsa='brew services start'
alias bs='brew services'
alias bso='brew services stop'

# Git

cpereiraweb

alefragnani.project-manager
amiralizadeh9480.laravel-extra-intellisense
antfu.icons-carbon
austenc.laravel-blade-spacer
bmewburn.vscode-intelephense-client
bradlc.vscode-tailwindcss
calebporzio.better-keybindings
calebporzio.better-phpunit
ceciljacob.code-plus-theme
cjhowe7.laravel-blade

cpereiraweb

#!/bin/sh
set -e

vendor/bin/phpunit

(git push) || true

git checkout production
git merge master

cpereiraweb

<?php
/**
 * This class extends the base NavigationClass provided by Jetstream.
 * Note that the base class includes the navigation-menu.blade.php
 */

namespace App\Http\Livewire;

class AppNavigationMenu extends \Laravel\Jetstream\Http\Livewire\NavigationMenu
{