Filament Page and Livewire, problem with tailwind css
I create laravel project, installed filament and create one page. Next, I create a livewire component, and call in this filament page.
The problem is on the div, not load class tailwind. ex: "bg-green-700".
I forgot to configure anything?
15 Replies
Are you using panels? If so you’ll need to setup a custom theme to use colors that aren’t part of Filament’s style sheet.
Yes. I installed panels.
This is code:
<x-filament-panels::page>
<livewire:my-component/>
</x-filament-panels::page>
The livewire component:
<div>
<div class="bg-sky-700 px-4 py-2 text-xl hover:bg-sky-800 sm:px-8 sm:py-3 bg-black/25 border border-gray-200/25">My Components</div>
</div>
Well then you need to setup a custom theme. https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme
Do I need to configure panels on pages to use livewire with tailwind css?
The panel loads the theme.
Command:
php artisan make:filament-theme mytheme
Result this:
default Filament panel is set. You may do this with the
default() method inside a Filament provider's panel() configuration.So any pages under that panel will have the themes css.
Did you run filament:install —panels after installing filament?
Sounds like your panel provider is missing the ->default() modifier. Check
app/Providers/Filament/AdminPanelProvider.phpI execute the command "filament:install —panels" and replace the AdminPanelProvider. Generate new page.
Default name of the panel is admin by default.
Right but at least one of your panels needs to have ->default() on it in the class.
Right. I execute "php artisan make:filament-theme livewire" and return this:
WARN Action is required to complete the theme setup:
⇂ First, add a new item to the
input array of vite.config.js: resources/css/filament/admin/theme.css
⇂ Next, register the theme in the admin panel provider using ->viteTheme('resources/css/filament/admin/theme.css')
⇂ Finally, run npm run build to compile the theme
not working. I need more configure?
class="text-xl and border" working.
class="bg-slate-700 or bg-sky-700" not working.Yea. You need to do those things manually.
But bg-slate-700 is from tailwind. Or I need to custom there?
It’s how tailwind works. If you want to use classes that aren’t in the filament css then you have to use a custom theme to run a build process. If you just want to change a default Filament color you can do so without a build by providing color overrides to the panel. https://filamentphp.com/docs/3.x/support/colors
In fact, I would like to use the ones on this page: https://tailwindcss.com/docs/customizing-colors#color-palette-reference
Báh!!
Customizing Colors - Tailwind CSS
Customizing the default color palette for your project.
Isn't it configured by default, for example something like bg-primary-500?