Tailwind CSS のクラス名を Prettier で自動整列する方法

Tailwind CSS を使っていると、クラス名が長くなって管理が大変…。
そんな悩みを解決してくれるのが Prettier + Tailwindプラグイン による自動並び替え です！

---

📌 使用ツール

• VS Code
• Prettier 拡張機能
• Tailwind CSS 導入済みプロジェクト

---

📌 導入手順

① Prettier と Tailwind プラグインを導入

npm install -D prettier prettier-plugin-tailwindcss

② プロジェクト直下に prettier.config.js を作成

// prettier.config.js

module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
};

③ VSCode の settings.json を設定

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "files.autoSave": "afterDelay"
}

---

📌 まとめ　

• 保存するだけでクラスが自動整列される！
• Prettier v3 以上推奨
• className がテンプレートリテラルやオブジェクトの中だと、
  並び替えされない点に注意！