Prettier の Tailwind クラス自動ソート (prettier-plugin-tailwindcss) が効かない

要約

prettier-plugin-tailwindcss でクラスがソートされない場合、(1) プラグインが入っているか、(2) Prettier 3 系で plugins に明示しているか、(3) tailwind.config の場所、(4) 他プラグインとの順序、を順に確認する。
Prettier 3 から plugins の auto-discover が廃止された点が最大の落とし穴。

よくある原因

1. プラグイン未導入: パッケージそのものが入っていない
2. Prettier 3 で plugins 未指定: v3 系は plugins 配列に明示的に書かないと読み込まれない
3. tailwind.config の検出失敗: monorepo / 非標準パスでは自動検出できず、tailwindConfig オプションが必要
4. プラグイン順序の問題: organize-imports など他プラグインの後に書かないと、ソート後に再フォーマットされ結果が消える

解決策

1. プラグインをインストールする

npm install -D prettier-plugin-tailwindcss

2. Prettier 3 では plugins に明示する

公式 plugins ドキュメント のとおり、Prettier 3 系は plugins 配列で明示する必要がある。

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

3. tailwind.config の場所を指定する

monorepo で UI パッケージに tailwind.config がある場合は、ルートの設定で参照先を渡す。

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./packages/ui/tailwind.config.js"
}

4. プラグイン順序を最後にする

プラグイン README のとおり、prettier-plugin-tailwindcss は他のすべてのプラグインの後に書かないとソート結果が他プラグインで上書きされる。

{
  "plugins": [
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss"
  ]
}