Next.js9 + Tailwindcss2.0環境で Error: true is not a PostCSS plugin エラーが発生

Next.jsアプリで使っていたTailwind CSSを1.5から2.0にアップデートした。

Next.js v9 and older don't support PostCSS 8 yet so you need to install the Tailwind CSS v2.0 PostCSS 7 compatibility build for now as we've shown above.

Install Tailwind CSS with Next.js - Tailwind CSS

今回使っていたNext.jsのバージョンが9.4.4だったので公式ドキュメントを参考にPostCSS 7でアップデートを実施。

yarn remove tailwindcss postcss autoprefixer
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

その後ローカル環境を立ち上げようとしたところ、下記のエラーが発生して起動できなくなってしまった。

Error: true is not a PostCSS plugin

package.jsonに記載していたpostcss関連のライブラリのバージョンも上げてみたがエラーは変わらず。

個別のライブラリのアップデートを試していくのは時間がかかりそうだったのと、シンプルなアプリだったのでnpm-check-updatesを使ってpackage.jsonに記載の全ライブラリのバージョンを一括で上げることにした。

ncu -u
yarn

これで、Next.jsバージョンが最新（10）まで上がり、PostCSSも8が使えるようになったのでエラーが解消した。

小規模アプリでない場合は影響範囲が大きすぎるので、↓のようにしてNext.jsとTailwindのみアップデートするのがよさそう。

yarn next@latest tailwindcss@latest postcss@latest autoprefixer@latest

参考

• Error: true is not a PostCSS plugin · Issue #17236 · vercel/next.js
• Install Tailwind CSS with Next.js - Tailwind CSS