© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•7mo ago•
8 replies
Xeretis

Tailwind not picking up classes after upgrade to filament v4

I have recently upgraded to filament v4 and with that to tailwind v4, but where v3 used to pick up and include styles in my custom blade components, v4 doesn't seem to do that. For reference here is my configuration:

vite.config.js:
import {defineConfig} from 'vite';
import laravel, {refreshPaths} from 'laravel-vite-plugin'
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [
        tailwindcss(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/student/theme.css', 'resources/css/filament/teacher/theme.css', 'resources/css/filament/admin/theme.css'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
                'app/Filament/**',
                'app/Providers/Filament/**',
            ],
        }),
    ],
});
import {defineConfig} from 'vite';
import laravel, {refreshPaths} from 'laravel-vite-plugin'
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [
        tailwindcss(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/student/theme.css', 'resources/css/filament/teacher/theme.css', 'resources/css/filament/admin/theme.css'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
                'app/Filament/**',
                'app/Providers/Filament/**',
            ],
        }),
    ],
});


app.css
@import 'tailwindcss';

@source '../**/*.blade.php';
@source '../**/*.js';
@source '../../storage/framework/views/*.php';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
}
@import 'tailwindcss';

@source '../**/*.blade.php';
@source '../**/*.js';
@source '../../storage/framework/views/*.php';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
}


theme.css (for the panel):
@import '../../../../vendor/filament/filament/resources/css/theme.css';

@source '../../../../app/Filament/Admin/**/*';
@source '../../../../resources/views/filament/admin/**/*';
@import '../../../../vendor/filament/filament/resources/css/theme.css';

@source '../../../../app/Filament/Admin/**/*';
@source '../../../../resources/views/filament/admin/**/*';
Solution
Okay, so I've fixed that too, I'm just leaving the solution here, if you are extending a filament page class and rendering that outside a panel, you have to add the @vite directive to the layout used by the pages (I did this by overwriting the base layout, there might be a better solution)
Jump to solution
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

tailwind v4 upgrade
FilamentFFilament / ❓┊help
5mo ago
Tailwind Classes Not Applying After Upgrading to v4.x
FilamentFFilament / ❓┊help
8mo ago
Can't use Tailwind-classes anymore after update to Filament V4
FilamentFFilament / ❓┊help
5mo ago
Filament v4 upgrade
FilamentFFilament / ❓┊help
4mo ago