npm run build creates public/build/assets/app-XXX.css but page loads css/filament/filament/app.css
I am getting crazy about it.
npm run build adds classes that I use in my app such as text-primary-500, but css/filament/filament/app.css don't have them.
Ran out of ideas.
I come from an old app in filament v3 and laravel 10 that I migrated to laravel 12 filament v4. It might be that the initial app was filament v2 if that helps.
11 Replies
you have to create a custom theme to be able to use tailwind classes that are not compiled in the core filament css
I created the custom theme. Now npm run build creates two css. app-XXXX.css and theme-XXX.css. THe first one has text-primary-500 defined, both the default definition and the definition I added to resources/css/app.css. But theme-XXX.css have none of them
yes you should have the app-xxx.css (filament styles) and theme-xxx your theme. you had your styles in the theme.css you shouldnt use the standard laravel css file.
The page only loads theme-xxx buy text-primary-500 is not there.
If I define it in theme.css it shows in theme-xxx.css. But only my version. Not the tailwind default one with all its variations.
I can't find many references of this class in vendor, maybe it is not used anymore? I find it in a couple of plugins and livewire modules I addapted... but that is surely old stuff.
because your primary variable is being overwritten by the filament, if you want a specific color you must register it
I think I have:
class AdminPanelProvider extends PanelProvider
{
public function boot(): void
{
...
FilamentColor::register([
'bredax' => [
50 => '209, 209, 209', '50',
100 => '254, 0, 0', // No setejat, escrit a boleo
200 => '0, 0, 254', // No setejat, escrit a boleo
300 => '254, 254, 0', // No setejat, escrit a boleo
400 => '254, 0, 254', // No setejat, escrit a boleo
500 => '255, 255, 255',
600 => '220, 0, 0', // No setejat, escrit a boleo
700 => '0, 28, 28', // No setejat, escrit a boleo
800 => '0, 27, 27', // No setejat, escrit a boleo
900 => '0, 29, 29', // No setejat, escrit a boleo
950 => '69, 10, 10', // No setejat, escrit a boleo
],
]);
}
and
public function panel(Panel $panel): Panel
{
return $panel
->colors([
'primary' => Color::Amber,
])
One of the works 😄
if you want bredax you use bg-bredax-500 if you want primary it will be Amber. Care to explain what do you want to achieve?
I have this plugin installed: "mokhosh/filament-rating" and the plugin uses text-primary-500 class to print the stars. I expected the stars to be printed Amber (like the primary color of my app) but they print black. The dom shows no text-primary-500 css rule has been defined.
I don't really understand how npm/tailwind/vite run but I understood they analize the code to find the classes that are actually used in the code so they can create a subset of them... so I don't get why they don't detect this class or how I force tailwind/vite to detect it
maybe thats a question you should ask in the plugin chat. Because I cant find a solution for that :/
Ok, thank you for your time! I REALLY appreciate it!
Filament Daily
YouTube
Filament v4: Tailwind Classes in Blade? You NEED Custom Theme.
A change in Filament 4, related to CSS compilation in your custom Blade files.
Docs: https://filamentphp.com/docs/4.x/styling/overview#using-tailwind-css-classes-in-your-blade-views-or-php-files
More Filament examples on our website: https://filamentexamples.com