Tailwind CSS in Filament Packages - Best Practice?
Hello Community!
I'm building a Filament form field package that uses Tailwind classes like focus-within:animate-pulse, text-gray-400, etc.
The problem: users might not have these classes in their final CSS build due to Tailwind purging.
How can I solve this? Thank you!
Solution:Jump to solution
I wouldn’t worry about the user having to do a custom theme though. Most users have one in place already. So it’s just copy paste from your readme/docs and running the build.
10 Replies
Do Filament v4 and Tailwind v4 support the tailwind.config.js file?
Tailwind v4 doesn't use a
tailwind.config.js anymore. It's configured inside the CSSthey are supported in v4, but aren't the recommended approach. https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file
Upgrade guide - Getting started
Upgrading your Tailwind CSS projects from v3 to v4.
So it turns out that if the user doesn’t have a custom theme, he must to create one (
make:filament-theme), otherwise the plugin won’t work properly?
Or did I miss something, and there is a better way to solve this problem?That is the recommended way to do it. It prevents bloat and potentially overriding styles on core views with core updates. You’re certainly free to compile your own styles and load them from the plugin, but it will be very difficult to reuse things like bg-primary etc since they won’t match filament.
Yeah, that's exactly why I posted this topic. I don't want to duplicate styles.
Okay, since Filament has switched to Tailwind v4, it looks like we need to update this doc - https://filamentphp.com/docs/4.x/advanced/assets#using-tailwind-css-in-plugins
At the bottom of the page is a link to submitting doc updates. 😁
Solution
I wouldn’t worry about the user having to do a custom theme though. Most users have one in place already. So it’s just copy paste from your readme/docs and running the build.
Got it, thank you 🤝