サイトロゴ

LaravelでTailwind CSSが反映されない

著者画像
Toshihiko Arai
投稿日: 2024-07-20

はじめに

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 フォルダから提供されます。
php artisan serve

npm run dev

  • 目的: フロントエンドアセットのビルドおよび開発サーバーの起動を行うために使用します。
  • ルートディレクトリ: 一般的には webpack.mix.js に設定されたルートディレクトリ。開発用のファイルを public フォルダに出力します。
  • URL: 通常、Webpackのデフォルト設定では http://localhost:8080 などのURLでアクセスします。これは設定によって変わる場合があります。
  • 機能: JavaScriptやCSSなどのフロントエンドアセットのホットリロードやビルドを行います。Webpack Dev Serverを使用して、変更が即座に反映される開発環境を提供します。
npm run dev

組み合わせて使用する方法

このスクリプトは、MySQLサーバー、フロントエンドの開発サーバー（npm run dev）、およびLaravelのサーバーを起動し、Control + Cで終了すると各サーバーを停止します。

#!/bin/bash

mysql.server start

cd web/

npm run dev &
NPM_PID=$!

php artisan serve --port=8700 &
LARAVEL_PID=$!

trap "echo 'Stopping servers...'; kill $NPM_PID $LARAVEL_PID; mysql.server stop; exit" INT

wait $NPM_PID
wait $LARAVEL_PID

関連記事