官網寫得有點模糊,這邊記錄一對應的流程:

根據不同的 panel 建立 theme:

$ php artisan make:filament-theme
$ php artisan make:filament-theme person

會生成兩個給指定 panel 用的 tailwind.config.jstheme.css:

resources/css/filament/person/tailwind.config.js
resources/css/filament/person/theme.css

以我這邊的例子來說要需要引入 tiptap 所需要用的 css 和需要注入 tailwind 的監聽檔案: tailwind.config.js

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        ...
        './vendor/awcodes/filament-tiptap-editor/resources/**/*.blade.php',
    ],
}

theme.css

@import '/vendor/awcodes/filament-tiptap-editor/resources/css/plugin.css';

接著 build file:

$ npm run build

接下來要告訴 panel provider 呼叫對應的 vitetheme,也就是剛剛的 theme.css style:

class PersonPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->brandName('Person')
            ->default()
            //....
            ])->viteTheme('resources/css/filament/person/theme.css');
    }

這樣就會 filament 讀取到對應的 css style 了。