npm / Node.js / Tailwind CSS の役割まとめ（Laravel編）

小学生でもわかる解説

実体	例え	何をしている？
Node.js	ミシン	設計図どおりに服を作る
npm	配達屋	設計図や道具を持ってくる
Tailwind CSS	服の設計図	どんな服を作るか決める
CSSファイル	完成した服	実際に着られる
ブラウザ	人	服を着るだけ

全体像

Node.js（ミシン）
  └ npm（配達屋）
      └ Tailwind CSS（設計図）
           └ CSSファイル（完成した服）

Laravel Herd に Node.js（ミシン）を入れる

→ ミシンが使えるようになる
→ 配達屋（npm）も一緒に来る
→ npm が設計図（Tailwind CSS）を持ってくる
→ ミシン（Node.js）が服（CSS）を作る

Laravel HerdでNodeを入れた場合

Laravel Herd に Node.js を入れる
　→ Node.js と npm が使えるようになる
　→ npm が npm install で Tailwind CSS をプロジェクトに持ってくる

表で解説

ステップ	何をした？	何が起きた？	例え
①	Laravel Herd に Node.js を入れる	Node.js が使えるようになる	ミシンを工場に置いた
②	Node.js が入る	npm も使える	配達屋も来た
③	npm install	npm が設計図を集める	配達屋が設計図を集める
④	Tailwind CSS	Tailwind が取得される	設計図が届く
⑤	node_modules	設計図を保管	倉庫に置く
⑥	npm run dev	Node.js がビルド	ミシンが服を作る
⑦	CSS完成	画面に反映	人が服を着る

Tailwind CSS はどこに入る？

Laravelフォルダ内の node_modules

laravel-project/
 ├ node_modules/
 │   └ tailwindcss/