Laravel Tailwind CSS で色がつかない！npm run dev で解決

Laravel11 でボタンに色をつけようとしたところ、背景色の緑がつかないことに気づきました。
開発者ツールであたっている CSS を確認しても、background-colorがどこにもいません。

npm run dev コマンドで解決

ターミナルでnpm run devするとボタンに色がつきます！
ページをリロードして確認します。

なぜ npm run dev しないと色（クラス）がつかないのか

Tailwind CSS はnpm run devをすると「開発モード」で動作します。
開発モードのとき、クラスを変更して保存すると Tailwind CSS がホットリロードされます。
ホットリロードとは、コードを変えたら手動でページ更新しなくても画面が自動でリロードされる・変更を確認できる機能を指します。

bg-green-800をbg-red-800に書き換えて保存すると、Tailwind CSS くんは「緑から赤になったなあ、じゃあ WEB ページで読み込む CSS の中から緑色に関する CSS は消しておくか」といい感じに読み込む CSS を軽量化してくれます。（これを「パージ」と呼びます。）

これが小規模なサイトなら特にありがたみもないのですが、何百ページもある WEB サイトなどの場合余計な CSS がいるだけでページの表示速度が遅くなる可能性があります。ページの表示速度が遅くなると訪問したユーザーの離脱や SEO 評価の低下を招きます。

ずっと npm run dev しなくちゃいけないの？

開発中はnpm run devをしておけば CSS を変更してもきちんとページに反映されるのがわかりました。
本番環境にアップするときは、npm run devの代わりにnpm run buildをして CSS を固めます。固まったCSSをブラウザで読み込めば、WEB ページに反映されます、

開発中はnpm run devで変更をリアルタイムで反映・確認し本番環境では固めた（ビルドされた）CSSを使うのが一般的なようです。