Tailwind CSS 公式の Prettier プラグインが素敵です

[追記2024.03.29]現在は Prettier ではなく主に ESLint を使っています。

こんにちは森田です。
今回は先日発表された Tailwind CSS 公式の Prettier プラグインが素敵だったので紹介します。

prettier-plugin-tailwindcss

tailwindlabs/prettier-plugin-tailwindcss

こちらは先日 Tailwind CSS ブログで発表されましたPrettier プラグインです。
Tailwind CSS v3.0 以上で動作します。

以下のように 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>

Vue の template セクションや、React コンポーネント（clsx 使用）でも動作しました。

Tailwind CSS は複数人で開発すると class の順番がバラバラになりがちでレビューが見づらかったりと色々問題になるのですが、このプラグインがあれば解決してくれそうです。

インストール方法

インストールは簡単で npm で dev-dependencyにインストールするだけです。

npm install -D prettier prettier-plugin-tailwindcss

特に設定も必要なく prettier が自動で読み込んで反映してくれます。

エディター設定

今回はVSCodeで保存時にフォーマットされる設定を記します。

VSCode に Prettier拡張をインストールし、settings.json か code-workspaceファイルに以下を設定します。

  "settings": {
    "editor.formatOnSave": false,
    "[html]": {
      "editor.formatOnSave": true,
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
  }

全てのファイルのフォーマットして保存をオフにし、htmlファイルをフォーマットして保存、フォーマッターを Prettierに指定しています。

htmlファイルの場合を書きましたが、 [javascript] や [vue] を指定すれば別形式のファイルも指定できます。

任意の並び替えはできない

任意の並び替えはできないみたいです。プラグインの仕様に全てお任せで並び替えします。

but there is no way to change the sort order. Just like with Prettier, we think that the benefits of auto-formatting will quickly outweigh any stylistic preferences you have and that you’ll get used to it pretty fast.

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier

むしろ、指定できないでフォーマッターに全部お任せの方が統一性が取れていいのかもしれません。

まとめ

Tailwind CSS の大きな問題を解決してくれるプラグインだと思います。

公式から出してもらえることで更新性などもある程度安心して使えそうですね。

関連リンク

• Automatic Class Sorting with Prettier
• tailwindlabs/prettier-plugin-tailwindcss