Next.js で Tailwind が反映されない…原因は「CSS キャッシュ」だった話<
Next.js + Tailwind でテンキー型 UI を作ろうとしたところ、
スタイルがまったく反映されないという問題に遭遇しました。
ボタンが小さい.....
Tailwind クラスを書いても見た目が変わらない
globals.css をインポートしているのに反映されない
キャッシュを消しても改善しない
AI ツールにも相談し、
Codex にはファイル構成までチェックしてもらいましたが、
それでも直らず。
結論から言うと原因は CSS のキャッシュが強烈に残っていたことでした。
global.cssファイルに /* test */って書いてサーバー再起動して反映。
以下、駄文の背景：
プッシュダイヤルのキーには、#や*があるのですが、通常のPCのテンキーにはそれらのキーがありません。
また、#や＊は、Shiftキーを押さないといけないので、ゲームには不向きです。
したがって、PCのテンキー配置でダイヤルの代用とします。
まず、普通にで描画してみると、小さい・・・
そして、AIが生成したスタイルを指定しても反映されない・・・・
パスを通しても見かけが変わらない。
コードで使っているTailwindが入っていないようだ。
どうもインラインスタイルのような記法が使える便利セットのようだ。
ワンクッションおいてブラウザ固有の問題などを吸収し、
インラインスタイルの欠点をカバーしているらしい。
でも、TailwindをAIの手順でインストールしても、治らない。
ChatGPTに聞いても、プロジェクトのことがよくわかっておらず、
エラーになったり、なんの変化もなかったりする。
困って、Codexに投げると、ガチャガチャとファイルを整理してくれた。
でも、表示が治らなない。
コードだけでなく、設定ファイルや依存関係もチェックしたが、スタイルが適用されない。
ブラウザのキャッシュクリア、サーバー再起動してもだめ。
結局、GPTがいろいろ投げた提案の中の、global.cssに/* test */って追加して
サーバー再起動みたいなことをやったら、やっとスタイルが適用された。
つまり、CSSのキャッシングが頑強に残っていた？？？
やれやれ。
いまのUIはボタンだけなので、これで終わり。
ダイヤログなどを実装する際に、shadcn/uiとかいうのを使う予定です。
なんか、コードの中に{中括弧}みたいのがあって、テンプレートタグみたいのがあったから、
なんだろうと思ったら、そこにJSを書くものらしい。
コードだったら、forループ書いて、echoするみたいに思うが、
mapって書けばいいらしいね。
return <main>バカじゃん</main>;
みたいになってるのって、JSXという書き方らしいね。
以上