TailwindCSSのclassの順番を自動整形する

問題

TailwindCSSのclass（ReactではclassName）の順番がバラバラで見づらい😥

ライブラリ

PrettierのtailwindCSS用プラグインがあるのでこれを使う⭐

https://github.com/tailwindlabs/prettier-plugin-tailwindcss

導入手順

インストール

npm install -D prettier prettier-plugin-tailwindcss

設定ファイル修正

.prettierrc.yaml

# プラグインの追加
plugins: ['prettier-plugin-tailwindcss']

結果

before

<input
  type='text'
  className='px-2 py-1.5 border border-gray-300 rounded-md text-gray-900 placeholder:text-gray-400 focus:border focus:border-gray-500 focus:outline-none'
/>

⏬

after✨

<input
  type='text'
  className='rounded-md border border-gray-300 px-2 py-1.5 text-gray-900 placeholder:text-gray-400 focus:border focus:border-gray-500 focus:outline-none'
/>