How do you style page components?
I have a simple page component. Say it's a white box:
<div class="bg-white"></div>
I have this component on a filamentPage.
How do I compile the tailwind classes just for that component?
If I add @vite(['resources/sass/app.scss']), it brings in bg-white, but the default theme breaks as that class exists for some reason in the sidebar.
I would have imagined the default theme to not have classes sitting there that can be overridden so easy? What am I missing?2 Replies
See. My white box on the right is triggering the sidebar class to have styling.
the sidebar has
bg-white lg:bg-transparent so it will have a background color on smaller screens where it becomes a slide out panel for the mobile menu.
but the proper way to use any custom class in the panel is to create a custom them and add your views to the 'content' key in the tailwind.config.js.
https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme