TailwindCSS classes not generating nor getting scanned and even safelist is not working.
Hi, I am trying to color my table rows according to the record data.
I tried adding the classes to safelist in tailwind.config.js but still not working.
My Path for the above Resource is
C:\laragon\www\kinggames\app\Filament\Resources\ManualDepositEntryResource\Pages\ManageManualDepositEntries.php Please guide me . Thank you !
C:\laragon\www\kinggames\app\Filament\Resources\ManualDepositEntryResource\Pages\ManageManualDepositEntries.php Please guide me . Thank you !
8 Replies
First of all - make sure your project with it's css is built correctly. Then you can style your records on a column-base. Try adding this to a column:
->extraAttributes(["class" => "bg-red-600"]), - it should make your column have a red-background. You could also go via ->extraHeaderAttributes(['style' => 'max-width: 50px'])
If that ain't enough you might have to build your own rows. See the docs for this: https://filamentphp.com/docs/2.x/tables/layout#custom-html but make sure to read the whole page.Actually - a better way to do what you want is documented here: https://filamentphp.com/docs/2.x/tables/getting-started#record-classes
Filament
Getting started - Table Builder - Filament
The elegant TALL stack table builder for Laravel artisans.
Exactly i am following this above way. But it only accepts classes which are there in filament. I tried text-white and it immediately renders the text to white, but when i use bg-red-300 or something like that it does not render. So what do i do to get the other tailwind classes to render
Hmm - are you using a custom theme? Maybe you have to redefine the colors then. Otherwise - maybe someone more experienced can help. @pboivin - Can you look into this please?
Sounds like your custom theme is not properly configured, or did you forget
npm run build?
https://filamentphp.com/docs/2.x/admin/appearance#building-themesI have not built any custom themes. I have the default. I run npm run dev with vite running successfully and npm run build to push the code for production
You have to use a custom theme if you want to use additional tailwind classes. See the link @pboivin provided on how to do that.
Okay understood. Thanks for your help. Il try creating new theme.