Tailwind CSSを自動で並び替える prettier plugin tailwindcss

2024.03.22

2024.04.11

Tailwind CSSを自動で並び替える prettier plugin tailwindcss

インストールと設定
その他
2024-04-11 追記

Tailwind CSSのクラス名を自動で並び替えてくれるPrettierのプラグイン prettier-plugin-tailwindcss をご紹介！

// before
<div className="m-8 flex-col py-6 text-center justify-between px-2 items-center flex" />
 
// after
<div className="m-8 flex flex-col items-center justify-between px-2 py-6 text-center">

並び替えを行うとTailwind CSS公式ブログに載っている推奨順になります

検証した環境

1	prettier	3.2.5
2	prettier-plugin-tailwindcss	0.5.12

インストールと設定

インストールします

npm install -D prettier-plugin-tailwindcss

Prettierの設定ファイルを更新します

prettier.config.js

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

この2点のみで設定完了！

Prettierを実行すると

いい感じにclassNameが並び替わってます！👏

その他

他Prettierプラグインとの互換性を担保するためにpluginsの最後に記載するのが良いそうです

prettier.config.js

// .prettierrc
module.exports = {
  // ..
  "plugins": [
    "prettier-plugin-svelte",
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss" // MUST come last
  ]
}