FilamentF
Filament•2y ago
bakriawad

some Tailwind classes not working

I have Filament v3, with Tailwind v3.4
A lot of the tailwind classes work, but some just don't, and sometimes they do in some areas, some seem to be missing

what I am trying to do right now is 
<div class="grid grid-cols-2 gap-4" > ....

The gap is applied, so is the grid, but grid-cols-2 just never works.
same with margins m-5 m-6 m-7

All filament pages seem to be styled, nothing off, but I didn't apply any extra styles there
What I am trying to style is a LiveWire component that sits in a csutom filament page

I have followed and installed everything following the theme install docs:
https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

I rebuilt using npm run dev and npm run build

my tailwind config:
 content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],


I noticed that, under public, there is several css generated
The app and Theme has the grid-cols-2

but I also notices that they arent imported when I check the page code in browser?
I did find that the page references a theme css file, but the content and path are not the one in the public folder



I'm stumped
image.png
image.png
Themes - Panel Builder - Filament
Solution
views are in:
resources/view/livewire/...
Tailwind config was:
content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
],

I added 
content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './resources/views/livewire/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
],
`

Seems to work now.
I am bout to jump off a bridge now
Jump to solution
Was this page helpful?