panel Appears Unstyled After Adding Custom Theme with Vite
Hello ,
I'm facing a specific issue while trying to apply a custom theme in Filament 4.x on an existing project and would appreciate some guidance.
The Problem
After a successful installation of Filament, my admin panel appears completely unstyled, even though npm run build completes successfully.
My Project Setup
Laravel: v11.45
PHP: v8.2.14
Goal: To apply a custom theme to change the font size of the page headings.
Steps I've Taken
I successfully installed Filament 4.x and can access the login page.
I created a custom theme.css file in resources/css/filament/admin/.
In theme.css, I added an @import for the base Filament styles at the very top, followed by my custom CSS rules.
I registered this file in vite.config.js as an entry point.
I registered the theme in AdminPanelProvider.php using ->viteTheme('...').
I ran npm run build, which completed successfully without any critical Vite errors.
The Result
When I visit the panel, as shown in the attached image. It seems Vite is not correctly linking the custom theme file to the HTML, preventing any styling from being applied.
I'm facing a specific issue while trying to apply a custom theme in Filament 4.x on an existing project and would appreciate some guidance.
The Problem
After a successful installation of Filament, my admin panel appears completely unstyled, even though npm run build completes successfully.
My Project Setup
Laravel: v11.45
PHP: v8.2.14
Goal: To apply a custom theme to change the font size of the page headings.
Steps I've Taken
I successfully installed Filament 4.x and can access the login page.
I created a custom theme.css file in resources/css/filament/admin/.
In theme.css, I added an @import for the base Filament styles at the very top, followed by my custom CSS rules.
I registered this file in vite.config.js as an entry point.
I registered the theme in AdminPanelProvider.php using ->viteTheme('...').
I ran npm run build, which completed successfully without any critical Vite errors.
The Result
When I visit the panel, as shown in the attached image. It seems Vite is not correctly linking the custom theme file to the HTML, preventing any styling from being applied.
Solution
Thank you so much — that was exactly the issue. Adding @tailwindcss/postcss to my postcss.config.js fixed it
