Is it possible to use Filament 3 without downgrading Tailwind 4 to 3 if no custom themes are used?
I've read the documentation saying that it isn't compatible with Tailwind 4, however, it isn't clear whether this is a general requirement or is a requirement only if you use custom themes. I'm in a pickle because we're using Laravel 12 with FluxUI v2 which the latter requires Tailwind v4. I'm seeing a lot of questions and answers on this front, generally, regarding the use of v3 vs v4 but what I don't see is any questions or answers regarding isolating Filament 3 or using pre-built css and excluding from Vite, etc as an interim solution.
Can I remove my custom themes for now and use pre-built css for Filament and keep my v4 tailwind for Larave's front end?
19 Replies
Just to update, based on my test the answer is yes. I disabled my custom themes and it appears I have Filament 3 working just fine in Laravel 12 with Tailwind 4 and everything looks fine. The only exception is the Overwatch plugin because (accorind to their docs) a custom theme must be used. So my plan is to disable Overwatch and launch without downgrading to Tailwind 3 unless someone has something I haven't thought of that this will create problems with. Any warnigns of doom if I don't downgrade? Is it worth updating the documentation? If yes, I'm happy to do a PR for it.
Gist
How to Use Tailwind v4 in Laravel 12 While Keeping Tailwind v3 for ...
How to Use Tailwind v4 in Laravel 12 While Keeping Tailwind v3 for Filament v3 (Using Vite Separation) - readme.md
You can also just use Tailwind v3 via npx just for the theme
Does it make sense for me to update the docs here? https://filamentphp.com/docs/3.x/actions/installation#installing-tailwind-css kinda seems like there's no scenario where downgrading is the right choice. For frequently updated theming, it sounds like @awcodes option is the right choice, and for infrequently updated, using npx for just the theme is the way to go. Dennis, do you have an example for that that I could use? I'm not familiar with using npx and I see two attempts here https://www.answeroverflow.com/m/1346411514353160212 and here https://github.com/filamentphp/filament/issues/15774 but neither seems like a clean one-liner for this minimalist use case.
Using Tailwind 4 alongside with filament - Filament
Since Filament 4 will still need some time, I am wondering if I can use Tailwind 4 alongside filament 3? I mean, I wanna use TW4 in my frontend and don't care what version of TW my backend uses.
GitHub
Error when creating custom Filament theme · Issue #15774 · filame...
Package filament/filament Package Version v3.2 Laravel Version v12.0 Livewire Version v3.0 PHP Version PHP 8.2.0 Problem description I am trying to create a custom Filament theme, but when I run th...
And it seems like if we did the npx route, we'd also need a final quick step to exclude filament from tailwind4's autodiscovery since the custom themes have tailwind configs and the panel providers specify the vite theme.
What's the issue with:
npx tailwindcss@3 --input ./resources/css/filament/admin/theme.css --output ./public/css/filament/admin/theme.css --config ./resources/css/filament/admin/tailwind.config.js --minify ?I mean that looks good to me. How do we go about excluding it from vite?
I think you can just remove it from Vite and just
->theme() to link your file.Ok cool I'll give it a shot and if it works I'll submit a PR
There should be some instructions when you run the make theme command
Yeah there's a copy of it here https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme but I think what the docs are missing is super confidence in what to do from someone on the outside and how to help make those decisions. Happy to submit a PR on it once I test out the options
On the same note, I think the directions here are a little confusing as well: https://filamentphp.com/docs/3.x/tables/installation#installing-tailwind-css. Each section has it's own installation instructions and they all say that you must downgrade tailwind. Is that actually the case if you want to install these packages on their own? Or is it only true if you want to customize the css through vite?
Yes, there is no way to use the single packages alongside TW4
got it
Compared with the Panel builder the single packages don't come with a precompiled CSS file
Makes sense
Someone recently posts in showcase how to use both
I think that's this: https://gist.github.com/thaqebon/994d5d8ba1d3b9643de8c32b2400e2c7
Gist
How to Use Tailwind v4 in Laravel 12 While Keeping Tailwind v3 for ...
How to Use Tailwind v4 in Laravel 12 While Keeping Tailwind v3 for Filament v3 (Using Vite Separation) - readme.md
Ahh sorry didn't catch the whole thread.
All good my dude I appreaciate the contribution