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

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

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

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

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

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

Tailwind CSSはCSSを記述することなく、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

npm install -D prettier prettier-plugin-tailwindcss

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

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

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

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

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

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

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

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

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

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

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

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