Tailwind CSSのクラス並び替えは「ただの整頓」ではない：生産性を極限まで高めるPrettier戦略
こんにちは。大規模フロントエンド開発の現場において、CSSの管理はしばしば「技術的負債の掃き溜め」と化します。特にTailwind CSSを採用しているプロジェクトで、クラス名が混沌とした状態で放置されているのを見ると、私は即座にメスを入れます。
「なぜPrettierの`prettier-plugin-tailwindcss`を強制するのか」。単なる見た目の問題だと思っていませんか？これは認知負荷の低減とGit差分の最適化という、エンジニアの寿命を左右する極めて合理的な判断なのです。
—
1. なぜ「順序」が開発速度を左右するのか
Tailwindのクラスを人力で管理するのは不可能です。例えば、以下の2つのコンポーネントを見てください。
直感的に感じる「読みやすさ」の違い。これは、プラグインが「Tailwind公式が推奨するCSSプロパティの定義順」（レイアウト > ボックスモデル > タイポグラフィ > 背景・エフェクト）に基づいてソートしているからです。
現場で震えるほどの恩恵
1. Git Diffの純粋化: 複数人が同じコンポーネントを編集しても、クラスの順序が常に固定されるため、不要なコンフリクトが9割消滅します。
2. 脳内パースの高速化: 「このクラスはどこにある？」と探す時間がゼロになります。レイアウトは常に先頭にあると確信できるからです。
—
2. 導入とベストプラクティス構成
まず、依存関係を導入します。
プラグインのインストール
npm install -D prettier-plugin-tailwindcss
`.prettierrc` の完成形
重要なのは、単にプラグインを入れるだけでなく、チーム全体で設定を強制することです。
{
“plugins”: [“prettier-plugin-tailwindcss”],
“tailwindConfig”: “./tailwind.config.js”, // 設定ファイルの場所を明示的に指定
“tailwindFunctions”: [“clsx”, “cn”, “cva”], // clsxやtailwind-mergeに対応させるための重要設定
“singleQuote”: true,
“semi”: false,
“tabWidth”: 2
}
【テックリードの知見】
`tailwindFunctions`の設定を忘れてはいけません。`cn()`や`clsx()`の中で使われるクラス名もソート対象に含めることで、動的なクラス生成時でも一貫性を維持できます。これができていない現場は、まだ素人です。
—
3. 生産性を極限まで高める「隠れた運用テクニック」
VS Codeの「最強」設定
エディタ設定で `editor.formatOnSave` を有効にするのは基本中の基本ですが、以下の設定を `.vscode/settings.json` に追加してください。
{
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: “explicit” // ESLintの自動修正も同時に走らせる
},
“editor.formatOnSave”: true,
“editor.defaultFormatter”: “esbenp.prettier-vscode”
}
チーム開発における「絶対ルール」
個人のPC環境に依存させないため、Husky + lint-staged でコミット時に強制実行させることが必須です。
// package.json
“lint-staged”: {
“.{js,ts,jsx,tsx}”: [
“prettier –write”,
“eslint –fix”
]
}
これを導入すれば、どれほどスキルの低いメンバーがコードを書いても、リポジトリにプッシュされる頃には「美しいクラス順序」に矯正されています。コードレビューで「クラスの順番が汚い」と指摘する時間は、これで完全に消滅します。
—
4. 導入時の注意点：ここだけは気をつけろ
非常に強力なプラグインですが、一点だけ注意が必要です。「極端に複雑なカスタム関数」です。
`prettier-plugin-tailwindcss`は静的解析をベースにソートを行うため、極端に動的な文字列連結（例：`className={‘bg-‘ + color + ‘-500’}`）が含まれる場合、プラグインがうまく解釈できず、意図しない挙動になることがあります。
対策:
- クラスの条件分岐には `clsx` や `tailwind-merge` を使用すること。
- 動的すぎるクラスは、極力コンポーネントのPropsとして切り出すこと。
—
結論：エンジニアは「書くこと」に集中せよ
クラスの並び替えを人間がやるのは、ただの浪費です。コンピュータが1ミリ秒で終わらせる作業を、人間が時間をかけて行う必要はありません。
今回紹介したセットアップを導入し、思考のノイズを一つ排除してください。整頓されたコードベースは、チームの士気を高め、プロダクトの品質を底上げする強力な武器になります。
さあ、今すぐ `npm install` して、あなたのチームの開発体験（DX）を次のステージへ引き上げましょう。