FilamentF
Filament•6mo ago
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/**',
            ],
        }),
    ],
});


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';
}


theme.css (for the panel):
@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
Was this page helpful?