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

こんにちは森田です。
今回は先日発表された 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 の大きな問題を解決してくれるプラグインだと思います。

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

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

関連リンク


投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やコミュニケーションを出来るように心掛けています。CSS設計・CMS構築や開発環境の構築などを得意としています。Macやエディタ、開発環境などを快適にすることにいつも燃えています。