Tailwind CSS はクラス名の記述が長くなりがちという問題がある。

<div className="transform bg-red-500 text-center text-xl text-red-900 duration-500 ease-in hover:bg-blue-500 hover:text-blue-900">
  ...
</div>

改行を入れることで多少改善するが、 Prettier にやって欲しいところ。

<div
  className="transform bg-red-500 text-center text-xl text-red-900
    duration-500 ease-in hover:bg-blue-500 hover:text-blue-900"
>
  ...
</div>

公式の Prettier プラグインでも検討はされているが実装されていない1。

非公式であるが prettier-plugin-classnames というプラグインがクラス名を改行する機能を提供している。 (Discussion のコメント より)

prettier-plugin-classnames - npm

公式のプラグインと併用するには prettier-plugin-merge も必要。

prettier-plugin-merge - npm 

pnpm install -D prettier-plugin-classnames prettier-plugin-merge

.prettierrc:

 {
   "singleQuote": true,
   "semi": false,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": [
+    "prettier-plugin-tailwindcss",
+    "prettier-plugin-classnames",
+    "prettier-plugin-merge"
+  ],
+  "endingPosition": "absolute-with-indent",
   "tailwindFunctions": ["clsx"]
 }

https://github.com/rokiyama/example-vite-react-app/blob/507b5f91df552016413fa53217f8f6d27c861c47/.prettierrc

endingPosition は改行位置を決めるもの。 relative, absolute, absolute-with-indent のいずれかを設定する。 デフォルトは relative であるが、 absolute-with-indent が自然な挙動に思えたので設定。

  1. 一度実装されたが revert されたらしい: Tailwind CSS のクラス属性長くなりがちな問題について  ↩︎