官網寫得有點模糊,這邊記錄一對應的流程:
根據不同的 panel 建立 theme:
$ php artisan make:filament-theme
$ php artisan make:filament-theme person
會生成兩個給指定 panel 用的 tailwind.config.js
和 theme.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 了。