【作業ログ】Laravel9のインストールからTailwind CSSの導入までの流れ

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

**公式はこちらからどうぞ。**
[インストール 9.x Laravel](https://readouble.com/laravel/9.x/ja/installation.html)
[Tailwind CSS | アセットのコンパイル（Mix） 9.x Laravel](https://readouble.com/laravel/9.x/ja/mix.html?header=Tailwind%2520CSS)

## 環境
macOS Monterey（12.3.1）

## Laravel9のインストール
公式の作業手順はこちら
[インストール 9.x Laravel](https://readouble.com/laravel/9.x/ja/installation.html)

#### 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
```
:::note warn
注：ポート番号が競合するようなdockerコンテナが既に立ち上がっている場合は[エラー](#（参考）Laravelインストール時に発生したエラーと対応)になるので事前に終了させておくこと
:::
<br>

以下の表示が出れば成功

```
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！
![スクリーンショット 2022-04-09 11.50.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1807203/21efb229-8037-b9a8-f318-388d84dd44ee.png)

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

公式の作業手順はこちら
[Tailwind CSS | アセットのコンパイル（Mix） 9.x Laravel](https://readouble.com/laravel/9.x/ja/mix.html?header=Tailwind%2520CSS)

#### 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](https://readouble.com/laravel/9.x/ja/blade.html#building-layouts)

#### 5. 以下のコマンドを実行しアセットをコンパイルする
```
% npm run dev
```
**あとはTailwind CSSが適応されることを確認できればOK！**

## （参考）Laravelインストール時に発生したエラーと対応
他のコンテナによりポートが使用済み状態
```
WARNING: Host is already in use by another container
```
- 原因
	- `./vendor/bin/sail up` 実行時に他のコンテナが重複するポート番号で起動しているとこのエラーが出る。
- 対策
	- ポート番号を変更するか、起動中のコンテナを終了させる