クラス名の結合をする軽量ライブラリの clsx

clsx は任意の数の引数を受け取り、それらを結合して返します。また、undefined や null などの falsy な値を無視します。

import clsx from "clsx";
 
const rounded = false
const className = clsx("text-white", "bg-blue-500", rounded && "rounded");
// => "text-white bg-blue-500"

オブジェクト形式でクラス名を渡すこともできます。この場合、値が truthy なプロパティのキーがクラス名として追加されます。

const className = clsx({
  "bg-blue-500 text-white": variant === "primary",
  "bg-gray-500 text-white": variant === "secondary",
  "bg-white text-gray-500": variant === "default",
});

引数を配列として渡すこともできます。この形式でクラス名を渡すことで、例えば text や bg などのプレフィックスごとにグルーピングできるので、よりみとおしが良くなります。

<button className={clsx(
  ["text-white", "dark:text-black"],
  ["bg-blue-500", "dark:bg-blue-900"],
  ["px-4", "py-2"],
)}>