Prettierによる自動クラスソート

Tailwindプロジェクトでユーティリティクラスをソートする最良の方法について、人々は少なくとも4年間議論してきました。本日、公式のTailwind CSS用Prettierプラグインのリリースにより、ついにその心配から解放されることを発表します。

このプラグインは、Tailwind CSSクラスを含むclass属性のテンプレートをスキャンし、推奨されるクラス順序に従ってそれらのクラスを自動的にソートします。

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>
<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>

カスタムTailwind設定とシームレスに連携し、Prettierプラグインであるため、Prettierが動作するあらゆる場所（人気のあるすべてのエディターとIDE、そしてもちろんコマンドライン）で動作します。

開始するには、prettier-plugin-tailwindcssを開発依存関係としてインストールします

npm install -D prettier prettier-plugin-tailwindcss

次に、プラグインをPrettier設定ファイルに追加します

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

Prettier CLIで--pluginフラグを使用するか、Prettier APIでpluginsオプションを使用して、プラグインをロードすることもできます。

クラスのソート方法

本質的に、このプラグインが行うのは、TailwindがCSSでクラスを順序付けるのと同じ順序でクラスを整理することだけです。

つまり、ベースレイヤーのクラスが最初にソートされ、次にコンポーネントレイヤーのクラス、そして最後にユーティリティレイヤーのクラスがソートされます。

<!-- `container` is a component so it comes first -->
<div class="container mx-auto px-6">
  <!-- ... -->
</div>

ユーティリティ自体もCSSでソートするのと同じ順序でソートされるため、他のクラスをオーバーライドするクラスは常にクラスリストの後ろに表示されます

<div class="pt-2 p-4">
<div class="p-4 pt-2">
    <!-- ... -->
  </div>
</div>

さまざまなユーティリティの実際の順序は、ボックスモデルに緩く基づいており、レイアウトに影響を与える影響の大きいクラスを先頭に、装飾クラスを末尾に配置しようとし、関連するユーティリティをまとめて保持しようとします

<div class="text-gray-700 shadow-md p-3 border-gray-300 ml-4 h-24 flex border-2">
<div class="ml-4 flex h-24 border-2 border-gray-300 p-3 text-gray-700 shadow-md">
    <!-- ... -->
  </div>
</div>

hover:やfocus:のような修飾子はグループ化され、プレーンユーティリティの後にソートされます

<div class="hover:opacity-75 opacity-50 hover:scale-150 scale-125">
<div class="scale-125 opacity-50 hover:scale-150 hover:opacity-75">
    <!-- ... -->
  </div>
</div>

md:やlg:のようなレスポンシブ修飾子は、テーマで設定されているのと同じ順序（デフォルトでは小さい順から大きい順）で最後にグループ化されます

<div class="lg:grid-cols-4 grid sm:grid-cols-3 grid-cols-2">
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
    <!-- ... -->
  </div>
</div>

Tailwindプラグインから提供されていないカスタムクラス（サードパーティライブラリをターゲットにするためのクラスなど）は常に先頭にソートされるため、要素がそれらを使用している場合でも簡単に確認できます

<div class="p-3 shadow-xl select2-dropdown">
<div class="select2-dropdown p-3 shadow-xl">
    <!-- ... -->
  </div>
</div>

カスタマイズ

私たちは、Prettierは、意見を持つことやカスタマイズの点でほとんど提供しないことに関して正しいと考えています。結局のところ、クラスをソートする最大の利点は、チーム内で議論することが1つ減ることです。

私たちは、理解しやすく、最も重要な情報をできるだけ早く伝達するソート順序を考案するために、大変努力してきました。

プラグインは、tailwind.config.jsファイルを尊重し、インストール済みのTailwindプラグインと連携しますが、ソート順序を変更する方法はありません。Prettierと同様に、自動フォーマットの利点は、あなたが持っているスタイルの好みをすぐに上回り、すぐに慣れると私たちは考えています。

試してみませんか？ GitHubで完全なドキュメントをご覧ください →