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.
6 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.