tailwind config missing
Hi there,
New to filament.
Created a fresh new laravel project and installed filament.
I need to customize a table row and documentation mentions to add the './app/Filament/*/.php' to the tailwind.config.js file, but the fresh installation doesn't come with one. Did I miss a step or something?
19 Replies
you have to create a custom theme
Solution
@Bruno Pereira That section is also confusing. It says Filament V3 uses Tailwindcss 3 yet the package.json has "tailwindcss": "^4.0.0" dependency...
filament has it's own tailwind.config file bundled in the vendor folder
it doesnt use the one in the root folder of the project
I understand.
https://filamentphp.com/docs/3.x/tables/advanced#custom-row-classes
I just need this ability to change the row color based on the status of the record
but...
yes, Filament has it's own tailwind classes. You can try to follow tailwind docs and add new classes but it wont work. You need to create a custom theme so that you can import the rest of tailwind options.
for example: If you try to apply the class "bg-cyan-500" on the table row. Without the custom theme it might not work because FIlament might not be using that class in the framework.
Well... I give up I will not customize the table row, its not clear how to do it properly in the documentation. Thanks @Bruno Pereira for your time
I feel the pain, but creating the theme is quite easy and it wont ruin the site
OK, I will try. Thats why we have version controls right ? hehe
yeah xD
trust me, you'll have more freedom to use other tailwind classes without problems
after you create the theme you can just do:
yeah it kinda works 🙂
It doesn't autocompile tho
on changes
probably because I'm running the app with
composer run devcomposer run dev only works with the root tailwind.config (I think)
but you can use npm run dev
I always forget that composer run dev exists so I normally use npm run dev and npm run build xD
Hey, i got a fresh laravel 12 Version with tailwind v4 and i tried to install a custom theme for filament. Maybe i dont understand it, but when i try to change the color of a div in custom component it doesnt works.
Example:
A div with class="border" works or something like text-gray-800, but text-red-500 doesnt work. Why?
Filament doesn’t support tailwind v4 so you would need an additional npm script to run the filament theme build with the tailwind v3 cli.
Ye i know, but the css classes still dont work. I add it to panelprovider and i got filament theme.css and a new tailwind.config.js
ah now it works. i need to compile after every change:
npx tailwindcss@3 --input ./resources/css/filament/admin/theme.css --output ./public/css/filament/admin/theme.css --config ./resources/css/filament/admin/tailwind.config.js --minify
then css classes will applied