F
Filament•3mo ago
islandnuge

Tailwind bg colours not working

I understand that specific changes are happening in version 4 of TailwindCSS, but I am currently encountering an issue in version 3 where some background colours are not functioning as expected. For instance, using standard TailwindCSS colours such as bg-red-500 and bg-blue-500 produces inconsistent results. While bg-red-500 works as intended, bg-blue-500 and other colours like bg-slate-500 do not appear to render at all. Is there something I need to add to my panel configuration to make these options available? Shouldn't this make those colors available? 
            ->colors([
                'primary'   => FilamentColor::Red,
                'secondary' => FilamentColor::Gray,
                'accent'    => FilamentColor::Indigo,
                'blue'     => FilamentColor::Blue,
                'slate'     => FilamentColor::Slate,
                'orange'   => FilamentColor::Orange,
                'yellow'   => FilamentColor::Yellow,
                'pink'     => FilamentColor::Pink,
                'rose'     => FilamentColor::Rose,
                'sky'      => FilamentColor::Sky,
            ])
            ->colors([
                'primary'   => FilamentColor::Red,
                'secondary' => FilamentColor::Gray,
                'accent'    => FilamentColor::Indigo,
                'blue'     => FilamentColor::Blue,
                'slate'     => FilamentColor::Slate,
                'orange'   => FilamentColor::Orange,
                'yellow'   => FilamentColor::Yellow,
                'pink'     => FilamentColor::Pink,
                'rose'     => FilamentColor::Rose,
                'sky'      => FilamentColor::Sky,
            ])
1 Reply
toeknee
toeknee•3mo ago
Where are you using them? The above are for us within filament assets and are loaded as custom inline style values. If you are using them in a blade then you need to include them within the blade for tailwind to compile them

Did you find this page helpful?