【DAY15】Tailwind CSSのクラスの並び替え（Laravel）

はじめに

Tailwind CSSを使用して装飾をしていたのですが、クラスの順番がぐちゃぐちゃになってしまい、可読性が低くなっているよう感じました。そのため、クラス名の順番を整理したいと思い調べたところ、自動でクラスを並び替えてくれるパッケージを見つけました。しかし、パッケージのインストールから使用まで色々と詰まって時間がかかったため、その過程をここに残しておきます。

開発環境

まず、私の開発環境について軽くまとめておきます。

• IDEとしてAWS Cloud9を使用
• phpフレームワークのLaravelを使用
• Laravel Breezeを使用
• npm環境が構築され、Tailwind CSSはインストール済み

prettier-plugin-tailwind

私が使用したパッケージは、「prettier-plugin-tailwind」です。これを使用すると、クラスをいい感じに並べ替えてくれます。ざっくり説明すると、

1. レイアウトに影響を与えるクラス（display,margin,heightなど）
2. 装飾するクラス（color,box-shadowなど）
3. 修飾子付きクラス（hover:,focus:など）
4. レスポンシブ修飾子付きクラス（md:,lgなど）

といった順番です。

まず、インストールをします。

npm install -D prettier prettier-plugin-tailwindcss

prettier-plugin-tailwindcssはPrettierの拡張機能なので、Prettierが必要です。私はPrettierも使っていなかったので、上記のコードでPrettierのインストールも同時に行いました。
Prettierとは、Node.js上で動作するコードフォーマッターです。

次に、設定ファイルである.prettierrc.jsonを作って、以下のコードを記述しました。

.prettierrc.json

{
    "plugins": ["prettier-plugin-tailwindcss"],
    "tailwindConfig": "./tailwind.config.js",
    "overrides": [
        {
            "options": {
                "trailingComma": "none",
                "tabWidth": 4,
                "semi": false,
                "singleQuote": false
            }
        }
    ]
}

Prettierでは、以下のようなデフォルトの設定があるようです。

• "trailingComma": "es5"（末尾カンマの指定）
• "tabWidth": 2（タブ幅はスペース2つ）
• "semi": true（文の終わりにセミコロンを追加）
• singleQuote: false（文字列にシングルクォートではなくダブルクォートを使用）

私はクラス名の順番を整えたかっただけなので、末尾カンマ、セミコロンの設定はなしにして、タブ幅は自身のコードに合わせました。

これで設定もできたので、一旦一つのファイルを指定して以下のコードで実行しました。

npx prettier --write resources/views/questions/index.blade.php

するとエラーが発生。どうやらlaravelの.blade.phpというカスタムファイル拡張子は対応していないようです。
blade.phpにも対応するよう、新たなプラグインをインストール&設定ファイルに追記。

npm install -D prettier-plugin-blade

.prettierrc.json

"plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-blade"],

これで実行したところ、クラス名のソートは行われましたが、タグ内の属性が多く行の文字数が長いところは改行されました。個人的に改行は要らなかったので行の文字数の指定を設定ファイルに追記。

.prettierrc.json

"printWidth": 500,

これで実行すると、思い通りにクラス名がソートされました。
シングルクオーテーションとダブルクオーテーションもぐちゃぐちゃだったのでそれもフォーマットされてお得。
挙動が確認できたので、設定ファイルで.blade.phpファイルに対して実行するよう指定して実行。

.prettierrc.json

"overrides": [
    {
        "files": "*.blade.php",
        "options": {
            "trailingComma": "none",
            "tabWidth": 4,
            "semi": false,
            "singleQuote": false
        }
    }
]

npx prettier --write .

これで全ての.blade.phpファイルのクラス名がソートされました。