Button Transparency and Styling Issues After Upgrading to Filament 3
Hi everyone,
I'm encountering a strange issue after upgrading my Filament app from version 2 to version 3. Since the upgrade, buttons on some pages have become transparent, and the overall styling seems inconsistent.
Here's a breakdown of the problem:
Transparent buttons on specific pages
Inconsistent styling throughout the app
Styles visible in the developer console but not applied
For context:
My app uses a modern monolithic architecture with Vue, Tailwind CSS, and Filament.
I've already searched the Filament documentation, scoured online resources, and checked the Discord channel for solutions, but haven't found a fix yet.
Would really appreciate any insights or suggestions from the community! If anyone has faced a similar issue after upgrading to Filament 3, please share your experience or potential solutions.
Additionally, I've uploaded screenshots showcasing the button issue and the visual difference before and after the upgrade
Thanks in advance!
10 Replies
you are missing the classes you have defined by the looks of it.
Have you run npm run build?
yes I have
Then please follow the setup steps again, it looks like you've missed a step. You likely have an .css file for filament an dmissing the extends etc
Did you import the preset in the tailwind.config.js?
yes i have!
And you did it as per v3 specs not v2? And updated the css file accordingly?
yes! i have went through the docs again and again as well.But couldn't find anything
Do you have any overrides in place?
no.I have a custom theme and have setted it up with the configurations according to the documentation as well
Sounds like you haven't otherwise it'd work like mine is.
V2 -> v3 themes changed quite a bit and colors are handled differently.
Remove your theme and you'll see it works, so then follow v3 step by step. If you are just changing colors theres no need for a new theme e\ither.