LaravelでTailwind CSSが反映されない

Laravelでレイアウト調整するために、bladeにTailwindのクラスを追加したのですが、反映されませんでした。結論から言うと npm run dev を起動してなかったのが原因でした。php artisan serve と npm run dev は、Laravelアプリケーションの異なる側面を処理するために使用されるコマンドであり、それぞれのルートディレクトリやURLの違いについて説明します。

  1. php artisan serve
  2. npm run dev
  3. 組み合わせて使用する方法

php artisan serve

  • 目的: Laravelの内蔵開発サーバーを起動するために使用します。
  • ルートディレクトリ: Laravelプロジェクトのルートディレクトリ（通常はプロジェクトのルートフォルダ）。
  • URL: デフォルトでは http://127.0.0.1:8000 でアクセスできます。
  • 機能: PHPで書かれたバックエンドコード（ルーティング、コントローラー、モデルなど）を処理します。静的ファイル（CSS、JavaScript）は public フォルダから提供されます。

bash
php artisan serve

npm 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

関連記事

アイデアノート > Webアプリ開発
最後までご覧いただきありがとうございます！

▼ 記事に関するご質問やお仕事のご相談は以下よりお願いいたします。
お問い合わせフォーム