Biome で Tailwind CSS のクラス名を自動ソートする

https://biomejs.dev/linter/rules/use-sorted-classes/ を使えば prettier-plugin-tailwindcss に近いことが可能になるので、それの設定方法を以下にメモする

Tailwind Variants と Tailwind Merge を一緒に使う場合の設定の例：

// biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useSortedClasses": {
          "fix": "safe",
          "level": "error",
          "options": {
            "functions": ["twMerge", "twJoin", "tv"]
          }
        }
      }
    }
  }
}

shadcn/ui で使う場合は、tvは使わないので代わりに "functions": ["twMerge", "twJoin", "cn"] などにすると良さそう。

なお、デフォルトで ["clsx", "cva"] が常に対象となるらしいのでそれらは省略している。

オプションの説明：

attributes

Classes in the class and className JSX attributes are always sorted. Use this option to add more attributes that should be sorted.

functions

If specified, strings in the indicated functions will be sorted. This is useful when working with libraries like clsx or cva.

https://biomejs.dev/linter/rules/use-sorted-classes/#options