tailwindcss

Tailwind CSS を v3+に上げると prettier-plugin-tailwind でエラーになる

tailwindcss 2022-02-12

tailwind を v2.0 系 ⇨v3.0.19 に上げて開発サーバーを立ち上げた際、下記エラーに遭遇した。

Error: Cannot find module '.../node_modules/tailwindcss/lib/util/processPlugins'
Require stack:
- .../node_modules/tailwind-classes-sorter/lib/index.js
- .../node_modules/prettier-plugin-tailwind/lib/index.js
- .../node_modules/prettier-plugin-tailwind/prettier-plugin-tailwind.js

prettier-plugin-tailwindがアップグレードに対応していないのだろうか?

エラーメッセージを調べていると下記 issue を発見。 Error when used with Tailwind 3.0.0

どうやら現在prettier-plugin-tailwindのメンテナンスが止まっており、やはり v3 に追従出来ていなかった模様。 No longer maintained - Looking for maintainers

さらに現在は tailwind 公式の下記プラグインの利用が推奨されていた。 Automatic Class Sorting with Prettier

プラグインを差し替えたところ無事ビルドエラーは解消できた。

名前が似ているので正直少し紛らわしい。。

追記

prettier-plugin-tailwindcssをインストールしたことでビルドエラーは解消したが、デフォルトの prettier による自動整形が動かなくなってしまった。 原因調査に時間を要しそうなので一旦プラグインを削除して様子を見ることにした。