Laravel Filamentでtailwind.cssをコンパイルできるようにする

tailwind.cssを利用できる環境を作成する

tailwind.cssを環境にインスト―ル

コマンドラインで以下を実行

sail npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss autoprefixer --save-dev

tailwind.cssの設定ファイルを作成

laravelフォルダ直下にtailwind.config.jsがあれば、そのまま使うけど、無ければ作る

tailwind.config.js

import preset from './vendor/filament/support/tailwind.config.preset'
 
export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

tailwind.cssが書き込まれるcssファイルを作成

/resources/css/app.cssがあれば、そのまま使うけど、無ければ作る

/resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

post.config.jsの設定ファイルを作成する

laravelフォルダ直下にpostcss.config.jsがあれば、そのまま使うけど、無ければ作る

postcss.config.js

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

viteの設定ファイルを作成する

laravelフォルダ直下にvite.config.jsがあれば、そのまま使うけど、無ければ作る

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Filamentで利用しているlayoutファイルに読み込む設定

/app/Providers/AppServiceProvider.php

use Illuminate\Database\Eloquent\Model;
use Filament\Support\Facades\FilamentView; //追加
use Illuminate\Support\Facades\Blade;  //追加

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
	//ここから追加
        FilamentView::registerRenderHook(
            'panels::head.end',
            fn (): string => Blade::render('@vite([\'resources/css/app.css\', \'resources/js/app.js\'])'),
        );
	//ここまで
    }
//以下省略

これで、下準備が完成した

独自のcss設定を利用したりした場合

tailwind.cssは各bladeファイルを見て回って必要なclass設定のみをcssに書き込みんで行く。
だから、プロジェクト全体で初めて利用したtailwindのclass名だとcssに入って無くて
cssが適用されない。
そういう時は、一回cssをビルドしちゃう

./vendor/bin/sail npm run build

また、見た目を作っている最中でclass名をごりごり変えたい時は、

./vendor/bin/sail npm run dev

とすると、画面表示の度にtailwindがファイルを見て回ってcssを作るようになる。
ただ、くそ重たくなるから、一回見た目が固まったら、そのままの方が良いかと思われ。