Next.js14のプロジェクトに入れたtailwind.cssが反映されない
yuto motokivercelでホスティングするところまではできた。
tailwindが読み込まれない問題が発生している。
同じような問題に遭遇している人が多くいるようだ...
yuto motoki./components -> ./Components
にするとうまくいくようだがダメだった。
yuto motoki"./src/**/*.{js,ts,jsx,tsx,mdx}"
を適用して
npm run build
npm run start
してみたが変わらず
npm run devではtailwind.cssが適用されるのは何故だろう。
yuto motokilayout.tsxにimport '@/globals.css'が適用されているか確認したが、問題なさそう。
yuto motokitailwind.cssが正常に動作しているnext.jsのプロジェクトを参考にしてみた。
社内のプロジェクトでは
- layout.tsxでimport '@/global.css'
- src/global.css
正常に動作するプロジェクトでは
- layout.tsxでimport './global.css'
- src/app/global.css
となっておりNext.jsのディレクトリ構成からルーティングを生成してる機能があることからglobal.cssの配置を直したら治るかも！と期待したがダメでした。
そりゃそうかー
＠のケースではエイリアスを定義しているから単純に読み込む場所が変わっただけっぽい。
yuto motokiNext.jsのバージョンをlatest(^14.2.3)にすることでローカルでは動作するようになった。
これをpushすれば動作すると思ったが、そんなことはなかった。
同じようなエラーがまだ発生している。
おなか すいた
yuto motoki見つけた。
next.config.mjsでproduction環境のみでディレクトリ構成を変更している記述があった。
const nextConfig = {
assetPrefix: process.env.NODE_ENV === 'production' ? '/hoge' : '',
...
}
この記述によりtailwindの指定範囲外になり、スタイルが適用されていなかったみたい。
消したらうまくいったが、assertPrefixに変わる別の対応策を考えなければ。。。
かゆ うま