Next.js（Tailwind v4）で globals.css に足したクラスが効かない：.next キャッシュが原因だった

Next.js（Tailwind v4）の開発中、globals.css に新しく足したクラスだけがブラウザに反映されない。既存のクラスは効いているのに、追加した分だけ無視される。

事象

• globals.css にCSSクラスを新規追加した（例：.card-grid { ... }）
• 既存のクラスは効くのに、新規追加したクラスだけスタイルが当たらない
• DevToolsで確認しても、その新規クラスがCSSOMに存在しない（ルール自体が生成されていない）
• 開発サーバーの再起動＋スーパーリロード（ハードリロード）でも変わらない
• 直前に、next dev を起動したまま別ターミナルで npm run build を走らせていた。白画面になることもあった

原因

.next の開発用ビルドキャッシュが壊れた、または古い状態で固着していた。

特に next dev を動かしたまま next build を同時に走らせると、両者が同じ .next ディレクトリを奪い合って中身が壊れることがある。壊れた／古いキャッシュがそのまま配信され続けるため、新しく足したCSSが反映されない。

サーバーの再起動やブラウザのリロードが効かないのは、それらがキャッシュそのものを作り直さないから。.next の中身が壊れている限り、何度リロードしても壊れたCSSが返ってくる。

解決策

.next ディレクトリを丸ごと削除して作り直す。

# 開発サーバーを止めてから
rm -rf .next
npm run dev

これで新規追加したCSSが反映される。

補足

• next dev と next build を同時に走らせない。ビルドを確認したいときは dev を止めてから build する
• 「コードは正しいのに反映されない」系の不具合は、コードを疑う前に .next を消す方が早いことが多い（CSSだけでなく、ルーティングや環境変数の反映でも同様に起きる）
• それでも直らない場合は、node_modules/.cache やブラウザ側のキャッシュも疑う