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
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:
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
Solution:Jump to solution
views are in:
resources/view/livewire/...
Tailwind config was:
```js
content: [...24 Replies
the theme being referenced
You missed a step. Probably forgot to add the theme to ->viteTheme() in your panel provider. And / or didn’t add it to you Vite config.
The instructions for that are on the doc you linked and mentioned in the terminal after running filament:theme.
it is present there
I redid the setup just incase I messed up, still nothing
This is not the right url. That url is the raw file. Not the built asset.
You did run npm run build right.
yup
Vite running as well
Are you seeing any console errors in the browser?
nope
all clear, no file download failures either
Could be a mismatch on your app_url too.
It seems it is loading the theme css
but as :md
and 32xl ??
Not sure. Sorry, something isn’t setup right.
but this seems to not work
You can see in the styles, searching for grid does not show the styling for
grid-cols-2
I can see that, but I really can't tell what it can actually be.
margins seem to not work either
My guess is it’s loading the wrong theme file.
Where is the view file located that you are using those classes in?
And what is in the content key of resources/css/filament/admin/tailwind.config.js
ah. figured.
Solution
views are in:
resources/view/livewire/...
Tailwind config was:
I added
`
Seems to work now.
I am bout to jump off a bridge nowHappens to a lot of people. Don’t worry about it.
Thanks a lot!