Using Tailwind 4 alongside with 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.
7 Replies
https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme At the bottom theres some cli command example about
npx tailwindcss@3, so maybe you can build the complete filament css file before hand, and then reference the file in your FilamentServiceProvider using ->theme. 🤔Did you try to install it?
Alright I tried it since it seems pretty interesting
so there needs to be some way to make
resolve when using the tailwindcss cli thing. 🤔 No idea tho
Relative path might work
@import "../../../vendor/filament/filament/resources/css/theme.css";@tonih did you make it work at the end ?
Yes, relative @import worked with a basic vite setup for tw4. Then when you need to rebuild filament panel's css you need to temporarily install tw3 and run something like
npx tailwindcss@3 --input ./resources/css/filament/admin/theme.css --output ./public/css/filament/admin/theme.css --config ./resources/css/filament/tailwind.config.js --minifySorry for late answer. Tried it out and it worked. But this - as far as I have tried - only works when not using Filament V3 on the frontend, because of some changes in TW4. So using it in an "isolated" admin panel is fine, but mixing Filament3 with TW4 will obviously break a lot of styles.
@bernhard @frame if you’re interested in a better approach to using Tailwind CSS v3 for Filament while continuing to use v4 for your Laravel app, I just wrote a guide on how to achieve that using Vite.
Let me know once you guys have tried or if you run into anything 😊
https://filamentthemes.com/guides/how-to-use-filament-with-tailwind-css-v4
How to use Filament with Tailwind CSS v4
Laravel 12 ships with version 4 of Tailwind CSS, while Filament v3 only supports version 3. This guide walks you through setting up Tailwind CSS v3 alongside v4.