npm run dev で Tailwind が効かなくなった原因と対策

🛑 起きたエラー

ある日、開発環境で npm run dev を実行したところ、Tailwind CSS のスタイルが適用されなくなった。
前日まで問題なく動作していたのに、突然見た目が崩れてしまった。

🔍 症状

• tailwind.config.js は変えていないのに Tailwind が効かなくなった
• globals.css の @tailwind の記述は問題なし
• npm run build && npm start でも直らない
• npx tailwindcss -i ./app/globals.css -o ./app/output.css --watch ではエラーなし

---

💡 原因

色々調査した結果、shadcn のコンポーネントを追加した際に npm install が実行され、それに伴って autoprefixer が削除されたことが原因だった。

🔎 詳細な原因

1. shadcn のコンポーネントを追加すると npm install が自動実行される

   npx shadcn-ui@latest add button
   

   • shadcn は 新しいコンポーネントを追加するときに package.json を更新し、自動的に npm install を実行する。

2. このとき、postcss.config.js が削除されていた

   • postcss.config.js がないと、autoprefixer は不要な依存関係と判断され、npm install 実行時に削除された可能性がある。

3. 結果として、Tailwind のスタイルが適用されなくなった

   • autoprefixer は postcss.config.js で設定されることが多く、これが消えたことで Tailwind の utilities が正しく動作しなくなった。

---

🛠️ 対策

この問題を防ぐために、以下の対策を実施する。

✅ autoprefixer を package.json に明示的に追加

autoprefixer が npm install で削除されないように、明示的に package.json に追加 する。

npm install -D autoprefixer

これで、今後 npm install を実行しても autoprefixer が消えることはない。

---

✅ postcss.config.js を復活させる

postcss.config.js を削除すると、Tailwind が正常に機能しなくなる可能性がある。
再作成して、以下の内容を設定する。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

その後、キャッシュをクリアして npm run dev を再起動 する。

rm -rf node_modules .next
npm install
npm run dev

---

🎯 まとめ

問題	原因	対策
npm run dev で Tailwind が効かなくなった	shadcn の追加時に npm install が実行され、autoprefixer が削除された	autoprefixer を package.json に明示的に追加
postcss.config.js がないと Tailwind が動かない	postcss.config.js が削除されると autoprefixer が消える可能性がある	postcss.config.js を復活させる
npm install で意図せず依存関係が変わる	shadcn のコンポーネント追加時に npm install が自動実行される	git status や git diff package-lock.json で変更を確認

 
 
 
 
以上です。