0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Tailwind v4 移行後に発生する『Error: Cannot apply unknown utility class』の解決方法

Last updated at Posted at 2025-01-25

問題

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 で議論中です。

公式の解決策が発表された場合、本記事に追記します。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?