Next.js14のプロジェクトに入れたtailwind.cssが反映されない

vercelでホスティングするところまではできた。

tailwindが読み込まれない問題が発生している。
同じような問題に遭遇している人が多くいるようだ...

./components -> ./Components
にするとうまくいくようだがダメだった。

"./src/**/*.{js,ts,jsx,tsx,mdx}"
を適用して
npm run build
npm run start
してみたが変わらず
npm run devではtailwind.cssが適用されるのは何故だろう。

https://zenn.dev/wakki/articles/e51c256fdc5e68
layout.tsxにimport '@/globals.css'が適用されているか確認したが、問題なさそう。

https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss
tailwind.cssが正常に動作しているnext.jsのプロジェクトを参考にしてみた。

社内のプロジェクトでは

• layout.tsxでimport '@/global.css'
• src/global.css

正常に動作するプロジェクトでは

• layout.tsxでimport './global.css'
• src/app/global.css

となっておりNext.jsのディレクトリ構成からルーティングを生成してる機能があることからglobal.cssの配置を直したら治るかも！と期待したがダメでした。

そりゃそうかー
＠のケースではエイリアスを定義しているから単純に読み込む場所が変わっただけっぽい。

Next.jsのバージョンをlatest(^14.2.3)にすることでローカルでは動作するようになった。
これをpushすれば動作すると思ったが、そんなことはなかった。
同じようなエラーがまだ発生している。

おなか すいた

見つけた。
next.config.mjsでproduction環境のみでディレクトリ構成を変更している記述があった。

const nextConfig = {
    assetPrefix: process.env.NODE_ENV === 'production' ? '/hoge' : '',
    ...
}

この記述によりtailwindの指定範囲外になり、スタイルが適用されていなかったみたい。
消したらうまくいったが、assertPrefixに変わる別の対応策を考えなければ。。。

かゆ うま