Filament•2mo ago

Filament V4 Custom footer

I just migrated a filament v3 project to filament v4. The migration process was very smooth and completed without any hiccups. The only thing that is broken is the custom footer I had implemented. I have attached the footer here. Below is my Panel Service Provider.

public function register(): void
{
    parent::register();

    FilamentView::registerRenderHook(
        PanelsRenderHook::FOOTER,
        fn (): string => Blade::render('footer')
    );

    FilamentView::registerRenderHook('panels::body.end', fn (): string => Blade::render("@vite('resources/js/app.js')"));
}

public function register(): void
{
    parent::register();

    FilamentView::registerRenderHook(
        PanelsRenderHook::FOOTER,
        fn (): string => Blade::render('footer')
    );

    FilamentView::registerRenderHook('panels::body.end', fn (): string => Blade::render("@vite('resources/js/app.js')"));
}

My vite.config.js

plugins: [
        tailwindcss(),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/app/theme.css'
            ],
            refresh: [
                ... refreshPaths,
                'app/Livewire/**',
                'app/Filament/**',
            ],
        }),
    ],

plugins: [
        tailwindcss(),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/app/theme.css'
            ],
            refresh: [
                ... refreshPaths,
                'app/Livewire/**',
                'app/Filament/**',
            ],
        }),
    ],

footer.blade.php

Solution:

Don’t import tailwind.css it’s already being imported by the filament theme. Just make sure the view for your custom footer is in a @source directive in the css file and rebuild the assets.

Jump to solution

9 Replies

Sadegh Zabeh•2mo ago

And How about resources/css/filament/app/theme.css ? Did you update that for tailwindcss 4?

chinwalprasadOP•2mo ago

Yes that has already been updated with tailwindcss 4. Everything else I'm the app just works.

awcodes•2mo ago

What is the content of the theme.css

chinwalprasadOP•2mo ago

Hey @awcodes, the content of theme.css is below:

@import '../../../../vendor/filament/filament/resources/css/theme.css';

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

@import '../../../../vendor/filament/filament/resources/css/theme.css';

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

Sadegh Zabeh•2mo ago

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';
@import 'tailwindcss';

chinwalprasadOP•2mo ago

@Sadegh Zabeh I updated my theme.css to include @import 'tailwindcss' but this breaks my entire filament page. Ex. shown in screenshot.

Sadegh Zabeh•2mo ago

What is the content of the theme.css And vite.config.js

Solution

awcodes•2mo ago

Don’t import tailwind.css it’s already being imported by the filament theme. Just make sure the view for your custom footer is in a @source directive in the css file and rebuild the assets.

chinwalprasadOP•2mo ago

This solved the issue. Thanks a lot for the help @awcodes and @Sadegh Zabeh 🙂

Gaming

Programming

Filament V4 Custom footer

Did you find this page helpful?