Tailwind CSS の並び替えは eslint-plugin-tailwindcss が素敵でした。

こんにちは、森田です。
以前の記事で Tailwind CSS の並び替えに便利な公式の Prettier プラグインを紹介したのですが、jsx および tsx では ESLint でやった方が多機能で便利なので紹介します。

eslint-plugin-tailwindcss

eslint-plugin-tailwindcss は Tailwind CSS を jsxなどで使う際に際に ESLint プラグインです。

以下のように class 属性の順番を自動でソートしてくれます。

// Before
<div className="p-3 border-gray-300 m-4 h-24 lg:p-4 flex border-2 lg:m-4">...</div>

// After
<div className="m-4 flex h-24 border-2 border-gray-300 p-3 lg:m-4 lg:p-4">...</div>

また、並び替えのみを行うPrettier プラグインと比べ、主に以下の機能を享受でき便利です。

• classNames や cva など引数の中でも使える
• 存在しないクラス名で警告
• 重複したプロパティに警告
• 複数クラスをショートハンドに変換

インストール方法

eslint-plugin-tailwindcss は名前の通り ESLint にプラグインとして追加します。
※ ESLint は導入済み前提で話を進めます。

npm で dev-dependencyにインストールします。

$ npm i -D eslint-plugin-tailwindcss

.eslintrc.js の extends にプラグインを指定します。

module.exports = {
  root: true,
  extends: ["plugin:tailwindcss/recommended"],
};

基本的にはこの設定のみで並び替えやその他の機能が使えるようになっているはずです。

エディター設定

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

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

  "settings": {
    "eslint.useESLintClass": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit",
    },
  },

エディタの設定方法はコロコロ変わるので、うまく動かない場合は拡張機能のページなどで最近の設定を調べるのをお勧めします。

オプション

ルールを編集

前章の recommended 設定を読み込むと以下の設定が読み込まれます。

rules: {
    'tailwindcss/classnames-order': 'warn',
    'tailwindcss/enforces-negative-arbitrary-values': 'warn',
    'tailwindcss/enforces-shorthand': 'warn',
    'tailwindcss/migration-from-tailwind-2': 'warn',
    'tailwindcss/no-arbitrary-value': 'off',
    'tailwindcss/no-custom-classname': 'warn',
    'tailwindcss/no-contradicting-classname': 'error',
    'tailwindcss/no-unnecessary-arbitrary-value': 'warn',
},

参考：https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/lib/index.js#L32

自分はショートハンドにまとめるルールは不要だったのでオフにしました。

rules: {
    "tailwindcss/enforces-shorthand": "off",
},

ライブラリを追加する

ライブラリ（関数）の中は特定の名前のみ解析されます。
デフォルトでは「”classnames”, “clsx”, “ctl”, “cva”, “tv”」に対応しています。

classnamesを cn と略して使いたかったので .eslintrc.js に以下のような設定を追加します。

settings: {
    tailwindcss: {
      callees: ["cn"],
    },
},

まとめ

このプラグインを使うことでクラス名の順番を気にしなくサクサク書けて快適です。
コードの一貫性を保て Tailwind CSS を書く上では欠かせないです。