・参考サイト：http://blog.livedoor.jp/nnmy/archives/55088059.html
【結論から言うと】
PostCSSの設定ファイルがプロジェクトに存在しなかったこと、さらにESモジュールとCommonJSの形式の違いが原因でエラーが発生していたことが、Tailwind CSSが正常にビルドされなかった理由です。
具体的には次の2つのポイントが問題でした:
-
postcss.config.jsが最初から存在していなかった。 -
postcss.config.jsを追加したが、.jsのままだったためESモジュールのエラーが発生。
【解決の流れ】
1. postcss.config.js ファイルの追加
Tailwind CSS公式ドキュメントに従い、postcss.config.js ファイルを手動で作成しました。しかし、module.exports という形式を使っていたため、ESモジュール環境ではエラーが続きました。
2. postcss.config.cjs ファイルへの変更
最終的に、postcss.config.js を postcss.config.cjs にリネームし、CommonJS形式でPostCSSを設定することで、無事反映されました。
エラーメッセージで「ESモジュールとCommonJSの違い」について言及されていた通り、package.json に "type": "module" が指定されていたため、postcss.config.js がESモジュールとして解釈されていました。これにより、module.exports が無効となり、エラーが発生していたのです。
解決策として、postcss.config.js を postcss.config.cjs にリネームし、CommonJSとしてPostCSSの設定を定義しました。この変更により、PostCSSの設定が正しく読み込まれ、Tailwind CSSのビルドが正常に動作しました。