TailwindCSS の新しいバージョン（v3系）がリリースされました。早速、素の Laravel に Tailwind の v3 系をターミナル経由でインストールした際のコマンドをメモ。

注意：今回は、素の Laravel をインストールして Tailwind をインストールする手順を紹介しています。例えば、認証パッケージで有名な「Breeze」や「Jetstream」をインストールした際は、自動的に Tailwind のスカフォールドが入っていますので、わざわざTailwindをインストールするためのコマンドを打つ必要がありません。

1, 素の Laravel をインストールして、プロジェクトルートに移動

// Laravelをインストール
laravel new project_name

// プロジェクトルートに移動
cd project_name

2, Tailwind を npm 経由でインストール

// 最初に Tailwind のインストール
npm install -D tailwindcss postcss autoprefixer

// 次に Laravel の開発に必要なパッケージのインストール
npm install

3, 設定ファイルの「tailwind.config.js」を作成

npx tailwindcss init

4, LaravelMix の構成を編集

プロジェクトルート直下の webpack.mix.js を編集して、PostCSS のプライグインとして Tailwind を取り入れます。

./webpack.mix.js

mix.js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [
+   require("tailwindcss"),
  ]);

5, テンプレートパスを書き込む

プロジェクトルート直下の tailwind.config.js を編集して、Tailwind のコンパイル先を指定します。

./tailwind.config.js

module.exports = {
+ content: [
+   "./resources/**/*.blade.php",
+   "./resources/**/*.js",
+   "./resources/**/*.vue",
+ ],
  theme: {
    extend: {},
  },
  plugins: [],
}

6, Tailwind のディレクティブを CSS に追加する

./resources/css/app.css を開いて、Tailwind の各々のディレクティブを追加して、Tailwind の機能を取り入れます。

./resources/css/app.css

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

7, ビルドプロセスを開始するためのコマンドを打つ

npm run watch

8, bladeファイルを保存し、結果をブラウザ上で確認する

⑤で設定したテンプレートパス内の対象のファイルを保存すると、自動的にコンパイルが開始されます。

例として、/resources/view/welcome.blade.php を以下のようにまるごと変更して保存しましょう。そして、保存した直後にコンパイルが正常に実行されているか確認してみましょう。

./resources/view/welcome/blade.php

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Tailwind を始めよう
  </h1>
</body>
</html>

こんな感じで Tailwind v3 系のインストールが完了しました。v3 系になって、さらにパワーアップした Tailwind を enjoy していただければ幸いです(=ﾟωﾟ)ﾉ