【JetBrains製エディタ対応】PrettierでTailwind CSSのclass名を規則的に自動ソーティングさせる

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回は、Prettierを使用してTailwind CSSのclass名を自動でソーティングさせる方法についてお話をします。

VS Codeを使用した環境での情報は多く出回っていますが、IntelliJ IDEAやWebStormなどのJetBrains製エディタを使用している場合についての情報はあまりなかったので、IntelliJ IDEAでの設定方法をご紹介したいと思います。

なぜclass名を規則的に記述したいのか

冒頭、前提としてなぜTailwind CSSのclass名を規則的に記述したいかについて、理由をご説明します。

Tailwind CSSCSSを記述することなく、HTMLタグのclass属性にCSSプロパティに対応したclass名を記述することでスタイリングができるCSSフレームワークです。

BEMなどのCSS設計が不要になることや、スタイルが膨れ上がる心配がないなどの利点がある一方で、複雑なスタイリングをする場合にclass属性が長くなり可読性が落ちるという欠点もあります。

<!-- 不規則に記述したコード -->
<div class="py-1 sm:flex-col px-2 items-center justify-center flex">...</div>

そのため、ルールに則って記述することで自分以外のメンバーがコードを読み解く場合の認知負荷を下げることができます。

<!-- レイアウト→修飾→疑似要素・ブレークポイントの順に規則的に記述したコード -->
<div class="flex items-center justify-center px-2 py-1 sm:flex-col">...</div>

しかしながら、手動で並び替えをすると、メンバー間で認識のズレが発生しやすくなったり、新しいメンバーが手を入れる場合にルールを覚えるのに時間を要したりしてしまいます。

そこで、コードフォーマッターのPrettierを使用することで、規則的なコード整形を自動化することができます。

また、Tailwind CSSが公式プラグインを公開しているため、整形ルールを細かく定義する必要なく簡単に設定することができます。

導入方法

前置きが長くなりましたが、PrettierとTailwind CSS公式プラグインの導入方法についてご説明します。

開発環境

今回はSpring Boot + Thymeleafなプロジェクトに、それぞれnpm版のパッケージをインストールします。今回導入する各パッケージのバージョンは以下の通りです。

├── prettier-plugin-tailwindcss@0.6.1
├── prettier@3.3.1
└── tailwindcss@3.4.3

Prettier本体と公式プラグインをインストールする

npm install -D prettier prettier-plugin-tailwindcss

Prettierの設定ファイルでプラグインの使用を宣言する

Prettierの設定ファイルである.prettierrcに、先程インストールしたprettier-plugin-tailwindcssを使用することを宣言します。

(※.prettierrcが存在しない場合にはnode_modulesと同じ階層に作成してください)

{
    "plugins": [
        "prettier-plugin-tailwindcss"
    ]
}

以上でプロジェクト上の設定は完了です。

エディタの設定

自動整形をを可能にするためにはIntelliJ IDEAの環境設定を変更する必要があります。

環境設定の言語&フレームワークJavaScript→Prettierから以下の通り設定してください。

  1. Manual Prettier configurationをオンにする
  2. Prettierパッケージのパスを指定する(node_modules内のprettierディレクトリを指定)
  3. 「次のファイルに実行」にTailwind CSSを使用するファイルの拡張子を指定する(今回はThymeleafなので.htmlのみ)
  4. 「保存時に実行」をオンにする

設定が完了した環境設定

以上の手順で設定することで、ファイル保存時に自動でclass名がソーティングされます。

並び順は、flexabsoluteなどのレイアウトに影響の大きいものを筆頭に、paddingプロパティなどの修飾的なもの、最後にfocus:などの疑似要素やsm:などのブレークポイントとなります。*1

さいごに

今回はPrettierのみを使用してTailwind CSSのclass名を自動でソーティングさせる方法をご紹介しました。

Tailwind CSSの弱点である可読性をPrettierを使用することで改善することができ、さらにはチーム内の認知負荷を下げる工夫にも繋がります。

これからTailwind CSSを使用される方の一助となれれば幸いです。

ご精読ありがとうございました。