Laravel Tailwind CSSで色などが反映されない理由と対策:npm run devとブラウザ更新

Laravel Breeze

LaravelのBreezeやJetstreamパッケージでは、Tailwind CSSがデフォルトで使えますが、最初は色が反映されなかったりします。

プロジェクト内で初めて使うクラスがある場合には、npm run dev を実行してください。そのうえで、ブラウザを更新します。

開発環境・本番環境でのTailwind CSSの反映方法と、なぜ普通に保存するだけでは反映されないのかの理由を解説していきます。

Junko
Junko

わたし自身、Tailwind CSSを初めて使った時は、やや悩みました。そこで調べたり、検証してみた結果をお伝えします。

Laravel Tailwind CSSで色などが反映されない時の対策

まずはCSSが反映されない場合の対策から。

①npm run devコマンドを実行してください。

②さらに、ブラウザを更新します。

ダメな場合は、ブラウザキャッシュの消去とハードの再読み込みを実施しておきましょう。

なおこれは、開発環境での対策です。

製品版を更新したときは、ユーザーにブラウザを更新してほしいとは、言いにくいですよね。

なので、自動でcssを読み直すようにしなくてはいけません。

方法としては、プロジェクトのなかで、public/css/app.css へのリンクがある場所にパラメータを追加します。

通常は、resources/views/layouts/app.blade.php内の下記のコードを編集します。

次のようにパラメータを追加しておきましょう。

上記の例では、日付をURLパラメータとして入れています。デザインを変更するたびに、
ここの文字列を更新しましょう。

こうすることによって、ブラウザ側に変更を伝えることができます。

詳しくはこちらの記事をご覧ください。

Laravel Tailwind CSS が反映される仕組み

コンパイルされた Tailwind CSSは、public/css/app.css の中にあります。

ブラウザでは、このファイルを読み込んで、Tailwindのクラスを反映させます。

このapp.css は、デフォルトで resources/views/layouts/app.blade.php の中に組み込まれています。

【app.blade.php】

app.blade.phpは、テンプレートのように他のビューファイルでも利用するファイルです。

なので、通常は意識しなくても、このファイルを使うことができます。

CSSファイルにすべての情報が入っているわけではない

ただ、public/css/app.css の中に最初からすべてのクラス情報が入っているわけではありません。

プロジェクトで初めて使うクラスをビューファイルに組み込むときは、クラスが反映されなかったりします。

たとえば、下記のコードをビューファイルにいれます。

すると、次のようにデフォルトのままのボタンが表示されます。

Junko
Junko

オレンジ色が反映されてないっ!

これは、public/css/app.cssの中にまだ「bg-orange-700」の情報がないためです。

そこで、npm run dev をして、CSS情報をコンパイルします。こうすることで、public/css/app.css に「bg-orange-700」情報が伝わります。

npm run dev のあと、ブラウザも更新してください。

クラス情報がブラウザに反映されるようになります。

毎回 npm run dev が面倒なら、 npm run watch でもOK

なお毎回 npm run dev を実行するのは面倒ですよね。

その場合は、 npm run watch をしておく手もあります。

npm run watch をすると、変更をするたびに都度、コンパイルしてくれます。

npm run dev が不要になります。

ただデメリットもあります。

npm run watch をすると、新しくコマンドが打てなくなってしまいます。

具体的には、ターミナルが次のような感じになります。

また、わりと負荷がかかり、重くなります。

Junko
Junko

容量が足りない時は、やめておいたほうがよいです。

さいごに

Laravel BreezeでTailwind CSSを使ったときに、CSSが反映されないときの理由と対策、お伝えしました。

  • プロジェクトで始めた使うTailwind CSSのクラスがあるときは、クラスが反映されない。npm run dev をする。
  • npm run watch をしておくと、都度、コンパイルしてくれるのでラク。ただしターミナルが使えなくなるなどデメリットあり。

参考になれば嬉しいです。

なおわたしのほうでは【Laravelの教科書】という、Laravelをいちから学ぶための学習サイトを運営しています。

現在は Laravel8とBootstrapを使ったプロジェクトの作成方法をご紹介しています。

今後、Laravel9(1月末リリース予定)とTailwind CSSを使ったプロジェクト作成方法を追加する予定です。

Twitterなどでもお知らせするので、良かったら、フォローしてくださいね。

JunkoのTwitterを見てみる

また、【Laravelの教科書】については、下記のご案内ページをご覧ください。

Laravelの教科書について、詳しく見てみる

Junko
Junko

基礎編は無料でプレゼント中です。

Laravel Breeze

【Laravelの教科書・無料プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック
【LaravelでWebアプリ開発します】

「会員制サイトを作ってほしい」「開発の時間がないから頼みたい!」

こんなご要望承り中。オンラインミーティングでも、ご相談承ります。

サンプルやお見積もり目安を見てみる

Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました