F
Filament•3mo ago
StringKe

How to replace pre-compiled tailwind css file?

I will share all tailwindcss configurations within the application. Currently some extra css in the filament panel doesn't work properly. My vite css registered through renderhook is not overriding the styles correctly. Just like .grid gets defined many times.
6 Replies
StringKe
StringKeOP•3mo ago
I'm not sure this is a solution to dynamically injecting vite styles 
<?php

namespace App\Providers\Filament;

use App\Filament\Team\Pages\Auth\Login;
...
use Illuminate\Support\Facades\Vite;
use Illuminate\View\Middleware\ShareErrorsFromSession;

class TeamPanelProvider extends PanelProvider
{
    public function boot(): void {}

    public function panel(Panel $panel): Panel
    {
        return $panel
            ->id('team')
            ->path('team')
            ->brandName(config('app.title'))
            ...
            ->renderHook(
                PanelsRenderHook::STYLES_AFTER,
                fn(): string => Vite::useHotFile('hot')
                    ->withEntryPoints(['resources/css/app.css'])
                    ->toHtml()
            );
    }
}
<?php

namespace App\Providers\Filament;

use App\Filament\Team\Pages\Auth\Login;
...
use Illuminate\Support\Facades\Vite;
use Illuminate\View\Middleware\ShareErrorsFromSession;

class TeamPanelProvider extends PanelProvider
{
    public function boot(): void {}

    public function panel(Panel $panel): Panel
    {
        return $panel
            ->id('team')
            ->path('team')
            ->brandName(config('app.title'))
            ...
            ->renderHook(
                PanelsRenderHook::STYLES_AFTER,
                fn(): string => Vite::useHotFile('hot')
                    ->withEntryPoints(['resources/css/app.css'])
                    ->toHtml()
            );
    }
}
Dennis Koch
Dennis Koch•3mo ago
For your custom Tailwind file, follow the instructions to create a theme.
StringKe
StringKeOP•3mo ago
What about the js part? Is it injected via hook?
Dennis Koch
Dennis Koch•3mo ago
What JS part? You mean the Vite server? It's handled by the theme as well
StringKe
StringKeOP•3mo ago
I see what you mean, I thought only strings were supported, checking the function signature supports passing arrays.
Dennis Koch
Dennis Koch•3mo ago
I don’t know what you mean by passing an array. I’m still talking about creating a theme if you want to change Filaments tailwind styles

Did you find this page helpful?