Tailwind CSSのアップグレードでCan't resolveのエラー
Tailwind CSSをv4へアップグレード作業中のこと。
公式のUpgrade guideにしたがって進めていたものの、次のようなエラーが出てしまいました。
05:36:13 [ERROR] Can't resolve 'tailwindcss' in '/home/eetann/ghq/github.com/eetann/cyber-blog/src/assets/styles' Stack trace: at finishWithoutResolve (/home/eetann/ghq/github.com/eetann/cyber-blog/node_modules/.pnpm/[email protected]/node_modules/enhanced-resolve/lib/Resolver.js:564:18) [...] See full stack trace in the browser, or rerun with --verbose.ここで解決できていないtailwindcssは@importの話です。
@import "tailwindcss";原因
アップグレードコマンド中のログの見逃しが原因でした。
まず公式ドキュメントに書いてあるコマンドを実行しました。
pnpx @tailwindcss/upgrade出力結果は次のとおりです。ハイライト箇所に注目してください。
Packages: +59+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++Progress: resolved 68, reused 59, downloaded 0, added 59, done省略≈ tailwindcss v4.0.14
│ Git directory is not clean. Please stash or commit your changes before migrating.
│ You may use the `--force` flag to silence this warning and perform the migration.アップグレードコマンドはGitに反映していない変更があると実行されないようです。
解決方法
Gitに反映していない変更をコミットしてから再度実行しました。
以上、Can't resolve 'tailwindcss'の解決方法でした。