本番環境でTailwindCSSが効かない【Next.js】

前提

次の構成での開発（TypeScriptはどうでもいいかも）

• React
• Next.js
• tailwindcss
• TypeScript

現象

開発環境（yarn devやnext dev）ではTailwindCSSで指定したスタイルが反映されているが，
本番環境（yarn startやnext start）では反映されない

原因

tailwind.config.jsのpurge設定が正しくなかったため

本番環境ではpurgeで指定したファイルのみCSSが適用されます．

私の場合は，ディレクトリ構成が次のようになっていたにも関わらず，

sample_appのディレクトリ構造

sample_app
|
|---src
|    |-components
|    |    |-... 
|    |
|    |-pages
|         |-... 
|    
|-tailwind.config.js

purgeは次のように設定されていました．

tailwind.config.js

module.exports = {
  purge: ["./components/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

私の場合，pagesやcomponentsは./src配下にあるため，./pagesや./componentsは存在せずcssが反映されていなかったということです．

よって，次のように修正したら解決しました．

tailwind.config.js

module.exports = {
  purge: ["./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

npx create-next-appではsrcディレクトリは生成されないので，私のようにそこからディレクトリ構造を変更した人がこの問題に直面するのかなと思います．