Zenn
🍃

Laravel + Blade + Vite 環境に Tailwind CSS v4 を導入する

に公開
CSS
Laravel
Tailwind CSS
Vite
tech

先日 Laravel プロジェクトに Tailwind CSS （v4.0）を導入しました。
備忘録として、技術スタックや設定手順などを書き残しておこうと思います。

Tailwind CSS v4 を導入したプロジェクトの「技術スタック」

  • GitHub リポジトリ
    • 1つだけ
  • バックエンド
    • 言語
      • PHP（v8.x）
    • フレームワーク
      • Laravel（v12.x）
  • フロントエンド
    • テンプレートエンジン
      • Blade
    • ビルドツール
      • Vite（v6.x）

設定方針

  • Tailwind CSS v4 が推奨する設定にする（＝基本的に最新の設定方法に寄せる）

作成 or 編集したファイル

編集したファイルは全部で5ファイルでした。

  1. src/package.json
  2. vite.config.js
  3. postcss.config.js
  4. resources/css/app.css
  5. resources/views/components/layout/app.blade.php （レイアウトファイル）

設定手順

1. 必要な Node.js パッケージをインストールする

ターミナルで以下のコマンドを実行し、必要なパッケージをインストール。

Laravel Vite Plugin

npm i -D laravel-vite-plugin

Tailwind CSS

npm i -D tailwindcss

@tailwindcss/postcss

npm i -D @tailwindcss/postcss

@tailwindcss/vite

npm i -D @tailwindcss/vite

備考

postcss と autoprefixer はパッケージ @tailwindcss/postcss に含まれているため、これらを個別にインストールする作業は不要とのこと。

2. 各種設定ファイルを作成 or 編集する

Vite との連携

  • ファイル
    • vite.config.js
  • 設定項目
    • Vite プラグインの設定
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.ts'
      ],
      refresh: true
    }),
    tailwindcss()
  ],
  server: { hmr: { host: 'localhost' } },
  build: { manifest: true }
});

PostCSS との連携

  • ファイル
    • postcss.config.js
  • 設定項目
    • プラグイン
export default {
    plugins: {
        '@tailwindcss/postcss': {},
    },
};

Tailwind CSS 自体の設定

  • ファイル
    • resources/css/app.css
  • 設定項目
    • 「Tailwind CSS の class はこれらのファイルで使用します」という宣言
      • 「自動コンテンツ検出」機能に任せる
    • CSS 変数（デザイントークン）を定義する
/* Tailwind CSS デフォルトのユーティリティクラスをインポート */
@import 'tailwindcss';

/* 本プロジェクトにおける Tailwind CSS のクラスの使用箇所を自動検出する範囲を明示 */
@source '../views/components';
@source '../views/pages';

@theme {
  /* color, font-size, spacing など、本プロジェクトで使用するデザイントークンを定義 */
}

※便宜上、今回私が携わったプロジェクトでは、 resources/views ディレクトリ以下に pages というディレクトリを追加で作成しています。

ビューファイルで Tailwind CSS を使用する

  • ファイル
    • resources/views/components/layout/app.blade.php（レイアウトファイル）
  • 設定項目
    • head タグ内に resources/css/app.css を読み込むコードを追記する
    <head>
        <meta charset="utf-8" />

        <!-- 中略 -->

        @vite(['resources/css/app.css')
    </head>

3. Vite の開発サーバーを起動する

ターミナルで以下のコマンドを実行し、 Vite の開発サーバーを起動する。

npm run dev

これにより、 Tailwind CSS でスタイリングした箇所のホットリロード機能が有効になる。

参考資料

Discussion