cn()

条件付きでクラスを組み立て、競合を解決するヘルパー。

className を条件付きで組み立てるヘルパーです。clsx で条件を解決し、tailwind-merge で競合 するユーティリティを解決します。

import { cn } from "@squadbase/vantage/ui";
import type { ClassValue } from "@squadbase/vantage/ui";

<div className={cn("p-4", isActive && "bg-accent", className)} />;

後から渡したクラスが勝つ

tailwind-merge を通しているので、競合するユーティリティは後ろが勝ちます。

cn("p-2", "p-4"); // → "p-4"

これが効くおかげで、コンポーネントに渡した className が既定のスタイルを確実に上書きできます。 組み込みコンポーネントはすべて内部で cn() を使っているので、className は常に上書きとして 機能します。

// 既定の bg-primary を確実に打ち消せる
<Button className="bg-emerald-600 hover:bg-emerald-700">実行</Button>