TailwindCSSのクラス名をVSCodeのファイル保存時に自動で並び替えする

TailwindCSSで使用しているクラス名を自動で並び替えする方法です。

前提条件

Prettierが設定されていること。
VSCodeのファイル保存時にPrettierの並び替えが自動設定されていること。
設定方法は以下の記事で紹介しています。
VSCodeにPrettierを設定する

パッケージのインストール

以下のパッケージをインストールします。

npm install -D prettier prettier-plugin-tailwindcss

Prettier設定ファイルの更新

Prettier設定ファイル（.prettierrc.jsonなど）に以下"plugins"の記述を追加します。

{
    "printWidth": 100,
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "endOfLine": "lf",
    "plugins": ["prettier-plugin-tailwindcss"]  ← 追加
}

実行確認

ファイル保存時に自動でクラス名が並び替えされます。
※すぐに反映されない場合、VSCodeの再起動が必要になる可能性があります

{/* 並び替えの例 */}
<div class="pt-2 p-4">
↓
<div class="p-4 pt-2">

参考記事

Automatic Class Sorting with Prettier
prettier-plugin-tailwindcss