この記事について

Laravel9環境でのTailwind CSSの動作を確認するため、
Laravel9のインストールからTailwind CSSの導入までを行いました。
その際の作業を一連の流れとして整理したので備忘録として記録。

公式はこちらからどうぞ。
インストール 9.x Laravel
Tailwind CSS | アセットのコンパイル（Mix） 9.x Laravel

環境

macOS Monterey（12.3.1）

Laravel9のインストール

公式の作業手順はこちら
インストール 9.x Laravel

1. Laravel9のインストール

Laravelプロジェクトを作成したいディレクトリで以下のコマンドを実行する

% curl -s "https://laravel.build/example-app" | bash

下記のような表示が出るのでPCへのログインパスワードを入力する

 _                               _
| |                             | |
| |     __ _ _ __ __ ___   _____| |
| |    / _` | '__/ _` \ \ / / _ \ |
| |___| (_| | | | (_| |\ V /  __/ |
|______\__,_|_|  \__,_| \_/ \___|_|

〜中略〜

Application ready! Build something amazing.
Sail scaffolding installed successfully.

Please provide your password so we can make some final adjustments to your application's permissions.

Password:

下記のメッセージが出れば成功！

Thank you! We hope you build something incredible. Dive in with: cd example-app && ./vendor/bin/sail up

2. サービスの起動

続いて以下のコマンドを実行する

% cd example-app && ./vendor/bin/sail up

注：ポート番号が競合するようなdockerコンテナが既に立ち上がっている場合はエラーになるので事前に終了させておくこと

以下の表示が出れば成功

Creating network "example-app_sail" with driver "bridge"
Creating example-app_selenium_1    ... done
Creating example-app_meilisearch_1 ... done
Creating example-app_redis_1       ... done
Creating example-app_mailhog_1     ... done
Creating example-app_mysql_1       ... done
Creating example-app_laravel.test_1 ... done
Attaching to example-app_redis_1, example-app_selenium_1, example-app_meilisearch_1, example-app_mailhog_1, example-app_mysql_1, example-app_laravel.test_1

ブラウザでlocalhostにアクセスしてウェルカムページが表示されることを確認できればOK！

Tailwind CSSの導入

Laravel9をインストールしただけではTailwind CSSは使えないのでインストールと設定を行う必要がある。

公式の作業手順はこちら
Tailwind CSS | アセットのコンパイル（Mix） 9.x Laravel

1.Tailwind CSSのインストール

下記のコマンドを実行する。

% npm install
% npm install -D tailwindcss
% npx tailwindcss init

これによりTailwind CSSがインストールされ、tailwind.config.jsファイルが生成される。

2. tailwind.config.jsの設定

tailwind.config.jsファイル内のcontentセクションに以下のように記述する。

content: [
    './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
	'./resources/**/*.vue',
	"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
],

3. スタイルシートの設定

スタイルシート（resources/css/app.css）に以下のように記述する。

app.css

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

4. bladeテンプレートへのスタイル適用

以下のheadタグの記述をbladeテンプレートに追加する

layouts/app.php

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="/css/app.css" rel="stylesheet">
</head>

上記は4で記述したスタイルシート（resources/css/app.css）を参照するための記述
resources/views/layouts/app.blade.phpを作成してこの記述を書いておけばbladeテンプレートの拡張性により使い回すことが可能
- 参考：レイアウト構築|Bladeテンプレート 9.x Laravel

5. 以下のコマンドを実行しアセットをコンパイルする

% npm run dev

あとはTailwind CSSが適応されることを確認できればOK！

（参考）Laravelインストール時に発生したエラーと対応

他のコンテナによりポートが使用済み状態

WARNING: Host is already in use by another container

原因
- ./vendor/bin/sail up 実行時に他のコンテナが重複するポート番号で起動しているとこのエラーが出る。
対策
- ポート番号を変更するか、起動中のコンテナを終了させる