Filament•5d ago

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.

Solution:

Thank you so much — that was exactly the issue. Adding @tailwindcss/postcss to my postcss.config.js fixed it

Jump to solution

15 Replies

Hussain4real•5d ago

have you upgraded your tailwindcss to v4?

Dania NouroOP•5d ago

yes

Hussain4real•5d ago

Can you paste the content of your custom theme file

Dania NouroOP•5d ago

here it is @import '/vendor/filament/filament/resources/css/theme.css'; @import "tailwindcss"; .fi-header-heading { font-size: 1.5rem !important; font-weight: 500 !important; }

Hussain4real•5d ago

you need to add this:

@source '../../../../app/Filament';
@source '../../../../resources/views/filament';

@source '../../../../app/Filament';
@source '../../../../resources/views/filament';

after the theme.css @import, remove the tailwindcss import Go through the upgrade guide again

Dania NouroOP•5d ago

These are present by default, but I tried removing them and the result is the same.

Hussain4real•5d ago

Aside filament Panels are other part of the application style working as expected?

Dania NouroOP•5d ago

All other parts are not styled correctly

Dennis Koch•5d ago

The path from your CSS file is probably wrong. It should be something like this @import '../../../../vendor/filament/filament/resources/css/theme.css'; Also check the path of your @source declarations

Dania NouroOP•5d ago

I deleted everything, then reinstalled npm, updated Vite, and created a default theme. @import '../../../../vendor/filament/filament/resources/css/theme.css'; @source '../../../../app/Filament//*'; @source '../../../../resources/views/filament//*'; .fi-header-heading { font-size: 1.0rem !important; font-weight: 500 !important; } However, I got the same result. I don't know the main reason for this.

Harvey•5d ago

I had a similar experience upgrading my v3 project. Does your postcss.config.js contain the following:

export default {
    plugins: {
        '@tailwindcss/postcss': {},
    },
};

export default {
    plugins: {
        '@tailwindcss/postcss': {},
    },
};

You will have to require it via npm @tailwindcss/postcss. This is assuming you have a postcss.config.js (otherwise make sure you have tailwindcss() plugin in vite.config.js).

Dennis Koch•5d ago

The file is created and you can see it in the browsers dev tools? What content does it contain?

Solution

Dania Nouro•5d ago

Thank you so much — that was exactly the issue. Adding @tailwindcss/postcss to my postcss.config.js fixed it

Dania NouroOP•5d ago

the issue is resolved now — thanks a lot for your time

Hussain4real•4d ago

Actually, tailwind has ditched postCss

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "NODE_OPTIONS='--max-old-space-size=2048' vite build && vite build --ssr"
    },
    "devDependencies": {
        "@inertiajs/vue3": "^2.0.0",
        "@tailwindcss/forms": "^0.5.3",
        "@tailwindcss/vite": "^4.1.11",
        "@vitejs/plugin-vue": "^5.0.0",
        "@vue/server-renderer": "^3.4.0",
        "autoprefixer": "^10.4.12",
        "axios": "^1.7.4",
        "concurrently": "^9.0.1",
        "laravel-vite-plugin": "^1.0",
        "tailwindcss": "^4.1.11",
        "vite": "^5.0",
        "vite-plugin-vue-devtools": "^7.7.6",
        "vue": "^3.4.0"
    },
    "dependencies": {
        "@heroicons/vue": "^2.2.0",
        "@tailwindcss/typography": "^0.5.15",
        "aos": "^3.0.0-beta.6",
        "dompurify": "^3.2.0",
        "flowbite": "^2.5.2",
        "flowbite-vue": "^0.2.1",
        "leaflet": "^1.9.4",
        "oh-vue-icons": "^1.0.0-rc3",
        "vue-tel-input": "^9.3.0",
        "vue3-toastify": "^0.2.5"
    }
}

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "NODE_OPTIONS='--max-old-space-size=2048' vite build && vite build --ssr"
    },
    "devDependencies": {
        "@inertiajs/vue3": "^2.0.0",
        "@tailwindcss/forms": "^0.5.3",
        "@tailwindcss/vite": "^4.1.11",
        "@vitejs/plugin-vue": "^5.0.0",
        "@vue/server-renderer": "^3.4.0",
        "autoprefixer": "^10.4.12",
        "axios": "^1.7.4",
        "concurrently": "^9.0.1",
        "laravel-vite-plugin": "^1.0",
        "tailwindcss": "^4.1.11",
        "vite": "^5.0",
        "vite-plugin-vue-devtools": "^7.7.6",
        "vue": "^3.4.0"
    },
    "dependencies": {
        "@heroicons/vue": "^2.2.0",
        "@tailwindcss/typography": "^0.5.15",
        "aos": "^3.0.0-beta.6",
        "dompurify": "^3.2.0",
        "flowbite": "^2.5.2",
        "flowbite-vue": "^0.2.1",
        "leaflet": "^1.9.4",
        "oh-vue-icons": "^1.0.0-rc3",
        "vue-tel-input": "^9.3.0",
        "vue3-toastify": "^0.2.5"
    }
}

A project I upgraded recently

Gaming

Programming

panel Appears Unstyled After Adding Custom Theme with Vite

Did you find this page helpful?