Tailwind CSS v4.0 での module.exports 非推奨によるエラーの対処法

エラーの概要

Tailwind CSS v4.0 以降では、tailwind.config.js の設定で ES Modules（ESM） を使用することが推奨される。
そのため、従来の CommonJS（CJS） の module.exports を使っていると、エラーが発生する。

エラーメッセージの例

SyntaxError: Cannot use import statement outside a module

または、

TypeError: module.exports is not a function

原因

Tailwind CSS v4.0以降では、設定ファイル tailwind.config.js に ESM（ES Modules） を使用するのが標準になりました。
そのため、従来の module.exports を使うと、ESM 環境でエラーが発生します。

解決策

解決策: export default を使う

Tailwind CSS v4.0 では、ESM を使うのが推奨されているため、tailwind.config.js を以下のように修正してください。

修正後のコード（ESM）

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

export default config;

結論

Nextjsなどで新規プロジェクトを立ち上げて、過去のコードを参考にするとき、そもそもtailwindcss.config.jsがなかったりするが、それも仕様。自分で作る必要がある。