Tailwind Issues even with Custom Theme
Hi,
I'm having some issues with tailwind where certain classes are not being picked up. I've setup a custom theme and followed all the instructions and still can't get it to work right.
The issue is only happening on components that are under the /resources/views/filament/... it's also happening in a component that lives in that dir, but includes some livewire components living under /resources/views/livewire/...
Here's my main tailwind config:
Finally, my theme tailwind config:
Am I missing anything? Thanks!
10 Replies
whats the content of theme.css
and did you add to panel
Just to help me understand, what is the use case of two tailwind configs? I use 2 myself, but they are only ever used in different contexts with separate stylesheets that will never get loaded at the same time.
Is it not normal to have this setup? I added a theme later on in the dev process, which basically made me end up with two tailwind config files. I'm using tailwind to style components on the "main" site and components that get rendered in the admin panel. I have around 3 panels.
Here are the contents: .
yep, followed all the instructions!
maybe the preset is clashing with some default tailwind classes?
Seemed to be the fact that I was pulling in two separate css files. I've moved onto using just 1 tailwind config and the sole theme.css file and it works well now.
No that’s not common. You normally would have a CSS file for your main app and one for your Filament theme
hmm, what about usage of certain plugins? For example, I'm using Flowbite on the main app, which requires a tailwind plugin. When including that plugin, if I have only one tailwind config, it affects the admin panel, changing opacity in some colors. Would it then make sense to have two separate config files?
Then You should include its @import in both stylesheets. But you shouldn’t load both into the panel.
You don’t have to have only one TW config.
In your css file, you can have different tailwind configs using the @config directive.
I have separate directories for the app and filament, the only difference is the @vite directive in the layout view.
If you don’t want the same styles for both then it surely makes sense to have 2 Stylesheets
Ok so I've resorted to this: I have two stylesheets, one for the theme in the panels, one for the main app. Two tailwind config files, one for the panels, one for the main app. The config in the main app includes the tailwind plugin from Flowbite, the one for the panels doesn't. In my main app layout, I'm including the main app.css. In my panel provider, I'm including the theme.css through my vite theme method. Does that setup make sense? Also, do I need to include both the theme.css and app.css in my main vite config?
Makes sense. Yes both need to be in the vite config otherwise vite won’t compile both of them.
Awesome, thanks!!