Customize the style existing components!
When I customize the existing component of filament, please make sure I have to make a new theme or not? Thank you.
Solution:Jump to solution
custom themes are useful if you want to use tailwind classes that are not used yet in filament components. Let's say you want to use
bg-purple-600 and this class is not used yet, it won't work unless you use a custom theme.4 Replies
Solution
custom themes are useful if you want to use tailwind classes that are not used yet in filament components. Let's say you want to use
bg-purple-600 and this class is not used yet, it won't work unless you use a custom theme.Thank you
Sorry for jumping in on this with another question - but would we then have to explicitly define e.g.
bg-purple-600 within our theme.css ?
I have found that I have to (for my example colour) add to my theme.css for example
or perhaps
This seems overly cumbersome so guess I must be missing something.
Look - for anyone elsde who is struggling with this - I now realise that my issue was that to utilise a tailwind class not used already (within Filament I guess) you have to
- modify blade (e.g. adding the references to classes required)
- run npm run build
- reload the page in the browser
It was this latter step that puzzled me as most blade changes seem to not require a full page reload to take effect - so sharing in case others have been as frustrated / ignorant ( 🙂 ) as me.you can also run
npm run dev or composer dev
=> it will watch the changes and hot reload your browser tab, this way you don't have to do npm run build and refresh each time