Laravel Viteを使ってTailwind CSSを導入する

こんにちは。配配メール開発課のmoryosukeです。
最新のLaravelではデフォルトのフロントエンドビルドツールがLaravel MixからLaravel Viteへと移行しました。そこでTailwind CSSをビルドする手順を追いながらLaravel Viteに慣れていこうと思います。

Laravel Viteとは
事前準備
- プロジェクト作成
Tailwind CSSを導入する
- 補足
最後に

Laravel Viteとは

Laravel ViteはLaravel用の高速なフロントエンド・ビルドツールであり、JavaScript のパッケージマネージャである Vite を使用しています。Vite は、フロントエンドのアプリケーションを高速に開発するためのツールであり、Webpack よりも高速で、リアルタイムのホットリロードや開発時の最適化機能を提供しています。 Laravelのバージョンが9.18以前はLaravel Mixがデフォルトで使用されていました。Laravel ViteとLaravel Mixの性能比較は以下の資料が参考になります。

speakerdeck.com

readouble.com

事前準備

プロジェクト作成

今回はLaravel Sailを使ってプロジェクトを作成していきます。
Docker Desktopをインストール後、プロジェクトを作成するディレクトリ下で以下のコマンドを実行します。

curl -s https://laravel.build/vite-sample | bash

プロジェクト作成が完了するとvite.config.jsという設定ファイルが追加されていることが確認できます。
ここで以下のような設定が可能です。

root：プロジェクトのルートディレクトリを指定する。
base：公開されるアセットのベースパスを指定する。
build：ビルドに関する設定を指定する。target、minify、outDirなどのプロパティがあります。
plugins：Viteプラグインを追加するための設定です。例えば、PWAプラグインやSassプラグインなどがあります。
server：開発サーバーの設定を指定する。port、host、proxy、httpsなどのプロパティがあります。
resolve：importやrequireで解決するファイルの拡張子などの設定を指定する。

ここでは、開発サーバの設定だけを追加で行います。
vite.config.js

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

export default defineConfig({
    ///ここから
    server: {
        hmr: {
            host: 'localhost',
        },
    },
    ///ここまで追加
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Tailwind CSSを導入する

以下のコマンドでTailwind CSSをインストールします。

./vendor/bin/sail up -d
sail npm install -D tailwindcss postcss autoprefixer
sail npx tailwindcss init -p

すると、tailwind.config.jsという設定ファイルが作成されます。
ここで以下のような設定が可能です。

theme：主に色、フォントサイズ、余白などの設定を変更するために使用されます。例えば、ヘッダーの高さやフォントファミリー、リストアイテムのインデント、ボックスシャドウのカラーやサイズなどを指定できます。
variants：各クラスに適用される状態を指定するために使用されます。例えば、hoverやfocus、activeなどの状態に応じたスタイルを定義することができます。
plugins：Tailwind CSSに新しい機能や変数を追加するために使用されます。例えば、フォントサイズを変数にまとめたり、新しいテキストエフェクトを追加することができます。ここでは、デフォルトのままとします。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

次にresources/css/app.cssに以下のコードを追加し、Tailwindのプリセットを使用できるようにします。

resources/css/app.css

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

これらのプリセットを使用することで、プロジェクトにTailwind CSSを適用するために必要な基本スタイル、コンポーネント、およびユーティリティクラスがインポートされます。

これでビルド時にTailwind CSSが読み込まれるようになりました。

bladeからCSSを呼び出すと完成です。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @vite('resources/css/app.css')
</head>
<body class="bg-gray-400">
  <h1 class="text-3xl bg-red-500 font-bold underline">
    Hello world!
  </h1>
</body>
</html>

以下のコマンドを入力すると開発サーバにCSSが配置されます。

sail npm run dev

アクセスすると以下のような画面が表示されます。

補足

上記で実行したsail npm run devは、開発サーバーを起動するためのコマンドであり、プロジェクトのファイルを監視し、変更があった場合に自動的に再ビルドして更新されたコードを提供します。このコマンドは、開発中に使用され、ソースコードの変更を即座に確認することができます。
本番環境用にビルドする際は、sail npm run buildを使用します。これにより、publicディレクトリにファイルが出力され、本番環境にデプロイできる状態になります。