Tailwind css are not working in custom page .
Tailwind css are not working in custom page . Classes are not detecting.
18 Replies
That's how Tailwind works. It's a fixed set of classes that are included inside Filament. If you need more, you need to create a theme and compile your own stylesheet.
Sorry, i've the same problem. How can i make work Tailwind css inside a custom page? thanks
Did you read my answer?
yes, but i won't more than that. I only would make work tailwindcss inside my custom page. Do i miss something that i can't understand?
So you don’t have any styling on your custom page?
The following example can exaplain. I've created a custom page. and in the blade i've this:
But for example bg-green-500 and other classes can't work
But you have styling? It’s just some classes that don’t work? Then my answer above applies to you too
yes i have, the other part of the page, for example the title or the sidebar is correctly rendered
filament/tailwind is imported as i can see exploring the page codeFilament custom pages belong to a specific panel. From my understing, it will render the theme specific to the panel. If you have custom styles, you need to extend the theme. You need to extend tauwing.config.js in your resources/css/filament/<panel_folder>/. All your extra colors must extend. Then build again.
Look into my commented section in my attached code, how I tried extending my theme.
Sorry but i still don't understand how can i have Tailwind in my custom pages...
Again: If you want custom classes that are not part of Filaments Tailwind build you need a theme. Follow the theme docs for instructions.
ok, this is a good start -> https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme ?
i've just done it following https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme . That was so easy! Thanks and sorry if i didn't understand what "create a theme" means! Now it's clear. Thanks a lot for your patience
Saying that you want tailwind in your pages is trivial, as tailwind css is built WITHIN filament. That means that every styling you see, is done with tailwind css.
Nice! Note, if you add existing classes in your theme, filament will replace its classes with yours
the default behavior for custom pages is that they don't get tailwindcss classes. only after creating a theme and some configuration for that specific panel you have tailwind in your custom pages
No. Your understanding is not correct. Filament comes bundled with Tailwind. It is just that in filament don't have all of Tailwind classes which are being used for the theme. In Tailwind you can define your presets which include only those classes which you want to use. Filament has created its own preset of selected classes. Unfortunately, there is no documentation on the website about tailwind preset classes used in Filament. So, you have to dig into the code. This is why Filament recommends creating your own theme for each panel. In each theme, you can either extend the existing theme (which is recommended) or you can entirely have your own theme with your set of classes.
Just want to say I've had this issue for hours and I couldn't wrap my head around it, but this solved my issue. Thanks!