LaravelでTailwind CSSが反映されない
Laravelでレイアウト調整するために、bladeにTailwindのクラスを追加したのですが、反映されませんでした。結論から言うと npm run dev を起動してなかったのが原因でした。php artisan serve と npm run dev は、Laravelアプリケーションの異なる側面を処理するために使用されるコマンドであり、それぞれのルートディレクトリやURLの違いについて説明します。
php artisan serve
- 目的: Laravelの内蔵開発サーバーを起動するために使用します。
- ルートディレクトリ: Laravelプロジェクトのルートディレクトリ（通常はプロジェクトのルートフォルダ）。
- URL: デフォルトでは http://127.0.0.1:8000 でアクセスできます。
- 機能: PHPで書かれたバックエンドコード（ルーティング、コントローラー、モデルなど）を処理します。静的ファイル（CSS、JavaScript）は public フォルダから提供されます。
bash
php artisan servenpm run dev
- 目的: フロントエンドアセットのビルドおよび開発サーバーの起動を行うために使用します。
- ルートディレクトリ: 一般的には webpack.mix.js に設定されたルートディレクトリ。開発用のファイルを public フォルダに出力します。
- URL: 通常、Webpackのデフォルト設定では http://localhost:8080 などのURLでアクセスします。これは設定によって変わる場合があります。
- 機能: JavaScriptやCSSなどのフロントエンドアセットのホットリロードやビルドを行います。Webpack Dev Serverを使用して、変更が即座に反映される開発環境を提供します。
bash
npm run dev組み合わせて使用する方法
このスクリプトは、MySQLサーバー、フロントエンドの開発サーバー（npm run dev）、およびLaravelのサーバーを起動し、Control + Cで終了すると各サーバーを停止します。
sh
#!/bin/bash
# MySQLサーバーを開始
mysql.server start
# 作業ディレクトリを移動
cd web/
# npm開発サーバーをバックグラウンドで起動
npm run dev &
NPM_PID=$!
# Laravelサーバーを特定のポートでバックグラウンドで起動
php artisan serve --port=8700 &
LARAVEL_PID=$!
# Ctrl+Cが押されたらサーバーを停止するためのトラップを設定
trap "echo 'Stopping servers...'; kill $NPM_PID $LARAVEL_PID; mysql.server stop; exit" INT
# サーバーのプロセスが終了するまで待機
wait $NPM_PID
wait $LARAVEL_PID