この記事について
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）に以下のように記述する。
@tailwind base;
@tailwind components;
@tailwind utilities;
4. bladeテンプレートへのスタイル適用
以下のheadタグの記述をbladeテンプレートに追加する
<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テンプレートの拡張性により使い回すことが可能
5. 以下のコマンドを実行しアセットをコンパイルする
% npm run dev
あとはTailwind CSSが適応されることを確認できればOK！
（参考）Laravelインストール時に発生したエラーと対応
他のコンテナによりポートが使用済み状態
WARNING: Host is already in use by another container
- 原因
-
./vendor/bin/sail up実行時に他のコンテナが重複するポート番号で起動しているとこのエラーが出る。
-
- 対策
- ポート番号を変更するか、起動中のコンテナを終了させる