問題
tailwind v4 に移行する際、公式ドキュメントに従って以下のコマンドを実行すると、プロジェクト内のファイルが v4 に対応するよう自動的に修正されます。
npx @tailwindcss/upgrade@next
しかし、2025/1/25時点では、Next.jsなどで利用するCSS Module ファイル(hoge.module.css
)等は修正してくれません。その結果、以下のようなエラーが発生することがあります。
Error: Cannot apply unknown utility class: text-lg
解決法
CSS Module ファイルの先頭に、以下のようにグローバル CSS ファイルを @reference
で参照する設定を追加します。
@reference "./global.css";
ファイルパス、ファイル名は適宜修正してください
なお、この問題は以下の Github issue や discussion で議論中です。
公式の解決策が発表された場合、本記事に追記します。