thaqebon

🚀 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

afsakar

<?php

namespace App\Providers\Filament;

use Filament\Panel;
use Filament\View\PanelsRenderHook;
use Illuminate\Support\Facades\Blade;

public function panel(Panel $panel): Panel
{

neverything

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\Storage;

class CopyToS3Command extends Command
{
    protected $signature = 'storage:mirror

A909M

->modifyQueryUsing(function (Builder $query, $livewire) {
                $hasFilters = collect($livewire->tableFilters)
                    ->filter(fn($filter) => !empty($filter['values']))
                    ->isNotEmpty();
                return ($livewire->hasTableSearch() || $hasFilters) ? $query : $query->whereRaw('1 = 0');
            })

saade

<?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;

neverything

<?php

use App\Filament\Resources\MilestoneResource;
use App\Filament\Resources\TaskResource;
use Filament\Navigation\NavigationBuilder;
use Filament\Navigation\NavigationGroup;
use Filament\Navigation\NavigationItem;
use Filament\Panel;
 
public function panel(Panel $panel): Panel

terryupton

<section x-data="{showModal: false, showLoading: false, html: ''}">

<button
  @click="html='loading...'; showLoading = true; showModal = !showModal; 
    fetch('{{ entry.url }}', {
      method: 'GET',
      headers: {
      'X-Requested-With': 'XMLHttpRequest',
      },
    })