Next.jsでTailwind CSSをbuildしたがcssファイルがうまく出力できなかった時に確認した項目

事象

Next.jsでTailwind CSSを使用した際に、

$ yarn dev

で開発モードから表示確認していた際には問題なかったのに、
プロダクション用に静的ファイルで出力しようと

$ yarn next build
$ yarn next export

コマンドを叩いた後のもので確認すると、スタイルがごっそり抜け落ちていました。
原因は単純なミスでしたが、一見buildは成功したように見えるため、調べるのに時間がかかってしまったのでメモとして残しておきます。

原因

tailwind.config.js の purge の項目で指定していたファイル拡張子が実際のものと違ったため、意図したファイル参照ができておらず、結果build対象外と判断され出力されていませんでした。
正しいファイルを参照するよう修正すると、問題なく動作しました。

purge とは

purgeとは、指定したファイル内で使っているクラスを判別し、未使用のクラスは排除して出力してくれる便利機能です。
CSSの肥大化を防ぐことが出来るため設定したほうが良いのですが、
今回のように間違って設定すると当然何も出力されません。。
また当たり前ですが、build自体は設定通りに「どのクラスも使ってないな」と判断して出力しているだけなので、特にエラーも出ないため、未知のバグを踏み抜いたかと思い内心かなり焦りました。

修正項目

tailwind.config.js 記述内容

修正前

最初は以下のように書いていました。

module.exports = {
  purge: ['./components/**/*.jsx', './pages/**/*.jsx'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

2行目の purge の項目の拡張子が .jsx の記述としていますが、
実際のファイルは .js で構成していたため、build対象から抜け落ちていました。

修正後

以下のように書き換えた後、 build し直したらうまく出力できました。

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

所感

エラーが出る → 類似例が無いかググる の行動の癖が変につきすぎていて
そもそもの手元のファイル指定や設定がおかしいと考えるよりも先に、先行例をひたすらに探しつづけてしまい、結果的に単純な設定ミスに気がつくのに時間がかかってしまいました。
今回のように実行そのものにエラーが発生していない場合、まずは単純な設定記述ミスが無いか、手順を追って確認するべきだったと反省しました。
次回以降同じような現象に遭遇した際は、今回のことを思い出して同じ轍を踏まないようにできればと思います。