CSS Component Builder Skill
Use this skill when styling new Filament components or Refactoring existing styles.
Philosophy
We do NOT put all CSS in app.css . We treat CSS like modular components.
Rules
- File Location
-
Create new CSS files in resources/css/filament/admin/components/[category]/[name].css .
-
Example: resources/css/filament/admin/components/sidebar/item.css .
- Registration
-
Register the new file in vite.config.js input array.
-
Import it in the Filament Panel Provider (app/Providers/Filament/AdminPanelProvider.php -> ->viteTheme(...) ) or verify auto-injection usage.
- Tailwind v4 Architecture
-
CSS-First Config: Use @theme inside your CSS files, not tailwind.config.js .
-
Import: Use @import "tailwindcss"; at the top of your main CSS.
-
Variables: Use native CSS variables defined in @theme (e.g., --color-primary-500 ).
-
Colors: Prefer oklch for new colors.
- Dark Mode
Use the dark: variant or CSS nesting:
.my-component { background: var(--color-white);
@media (prefers-color-scheme: dark) {
background: var(--color-gray-900);
}
}