Best practices for styling Filament components
What are the best practices for custom styling according to you guys? For example the TextInput from the Form builder. I want to style multiple components globally around my Filament project, preferable by using tailwind classes instead of custom css.
I can think of 4 options:
1. Global css using existing specific classes and selectors.
2. Overwriting the blade template, but I prefer not to due to the disadvantage of not retrieving automatic updates.
3. Using setAttribute per component (adding custom css or tailwind classes), but I prefer not to due to the amount of extra (duplicated) code.
4. Setting the extra classes globally somewhere using setAttribute, maybe via dependency injection? I haven't tried this yet though.
I prefer just to add tailwind classes in an elegant way. What is your best practice in styling Filament?
7 Replies
1. Target the
filament- that we spinkle in here and there to style the components via a CSS fle.Thank you for the reply, but how about adding existing tailwind classes though? Don't want to reinvent the wheel all the time.
(ah I see you replied to my point 1 now)
Use Tailwinds
@apply
I meant: Use option 1 😅Ah I see now, that's a great option indeed. Thank you!
Theming with Tailwind is always a bit hard so that's the easiest way so far.
Just want to add here: what if we WANT to use tailwind classes here and there? Then we are talking option 3., and option 4. would also be nice if I want to change the font or header sizes, no?
Option 1 and 3. You can set invidual classes via
setAttribute but the best way is just using CSS with Tailwind applied