リファクタリング

[TakashiYano]

• className管理ライブラリに関して、classcatライブラリからtailwind-variantsライブラリに書き換える

[TakashiYano]

Tailwind CSS の不満点

• テンプレート側がカオスになる問題

<button className="rounded bg-indigo-600 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
  ボタン
</button>

• 状態に応じたユーティリティの付与

<button
  className={`rounded bg-indigo-600 font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 ${
    size === "md" ? "px-2.5 py-1.5 text-sm" : "px-2 py-1 text-xs"
  }`}
>
  ボタン
</button>

今までの解決策

GitHub - lukeed/clsx: A tiny (228B) utility for constructing className strings conditionally.

<button
  className={clsx(
    "rounded bg-indigo-600 font-semibold text-white shadow-sm",
    "hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
    "px-2 py-1 text-xs": size === "sm"
    "px-2.5 py-1.5 text-sm": size === "md"
  )}
>
  ボタン
</button>

新しい解決策

GitHub - joe-bell/cva: Class Variance Authority

import { cva } from "class-variance-authority";

const button = cva(
  [
    "rounded bg-indigo-600 font-semibold text-white shadow-sm",
    "hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
  ],
  {
    variants: {
      size: {
        sm: "px-2 py-1 text-xs",
        md: "px-2.5 py-1.5 text-sm",
      },
    },
    defaultVariants: {
      size: "md",
    },
  }
);

<button className={button()}>ボタン</button>;

レスポンシブスタイルへの対応や、複数 Node への対応が難しい。

更に新しい解決策

GitHub - nextui-org/tailwind-variants: 🦄 Tailwindcss first-class variant API

[TakashiYano]

書き換えが完了した