ReactでTailwind CSSのクラスを条件で切り替える方法

import type { ReactNode } from 'react';

type Color = 'violet' | 'emerald';

// 色の名前をつなげてクラス名を作る（Tailwind からは見つけられない）
export function BadBadge({ color, children }: { color: Color; children: ReactNode }) {
  return <span className={`bg-${color}-600 rounded px-2 py-1 text-white`}>{children}</span>;
}

bg-violet-600: 0
bg-emerald-600: 0
bg-sky-600: 1
bg-rose-600: 1
bg-amber-300: 1

violet {"className":"bg-violet-600 rounded px-2 py-1 text-white","background":"rgba(0, 0, 0, 0)", ...}

import type { ReactNode } from 'react';

// クラス名は、省略せずに全部書いておく
const colorClasses = {
  sky: 'bg-sky-600 text-white',
  rose: 'bg-rose-600 text-white',
  amber: 'bg-amber-300 text-black',
} satisfies Record<string, string>;

type Color = keyof typeof colorClasses;

export function Badge({ color, children }: { color: Color; children: ReactNode }) {
  return <span className={`${colorClasses[color]} rounded px-2 py-1`}>{children}</span>;
}

check/BadUsage.tsx(4,33): error TS2322: Type '"violet"' is not assignable to type '"amber" | "rose" | "sky"'.

@import "tailwindcss" source(none);
@source "../src";
@source inline("bg-{violet,emerald}-600");

<span className={`rounded-full border px-3 py-1 ${selected && 'bg-sky-600 text-white'} ${count && 'font-bold'}`}>
  {label}（{count}）
</span>

"className":"rounded-full border px-3 py-1 false 0"

import { clsx } from 'clsx';

type ChipProps = { label: string; selected: boolean; count: number; disabled?: boolean };

// clsx で、条件に合うクラスだけを残す
export function Chip({ label, selected, count, disabled = false }: ChipProps) {
  return (
    <span
      className={clsx(
        'rounded-full border px-3 py-1',
        selected ? 'border-sky-600 bg-sky-600 text-white' : 'border-gray-300 bg-white text-gray-700',
        count > 0 && 'font-bold',
        disabled && 'opacity-50',
      )}
    >
      {label}（{count}）
    </span>
  );
}

未選択（0） {"className":"rounded-full border px-3 py-1 border-gray-300 bg-white text-gray-700", ...}
選択中（3） {"className":"rounded-full border px-3 py-1 border-sky-600 bg-sky-600 text-white font-bold", ...}
使えない（2） {"className":"rounded-full border px-3 py-1 border-gray-300 bg-white text-gray-700 font-bold opacity-50", ...}

import type { ComponentProps } from 'react';
import { clsx } from 'clsx';

// 外から渡されたクラスを、後ろにつなげるだけ
export function JoinButton({ className, ...props }: ComponentProps<'button'>) {
  return <button {...props} className={clsx('rounded bg-sky-600 px-4 py-2 text-white', className)} />;
}

join {"className":"rounded bg-sky-600 px-4 py-2 text-white bg-rose-600 p-2","background":"oklch(0.588 0.158 241.966)","padding":"8px 16px", ...}

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

merge {"className":"rounded text-white bg-rose-600 p-2","background":"oklch(0.586 0.253 17.585)","padding":"8px", ...}

twMerge（px-6 だけ）: rounded bg-sky-600 py-2 text-white px-6
twMerge（hover は別扱い）: rounded bg-sky-600 px-4 py-2 text-white hover:bg-sky-700

import { clsx, type ClassValue } from 'clsx';
import { extendTailwindMerge } from 'tailwind-merge';

// @theme に足した --text-huge を、文字の大きさとして教える
const twMerge = extendTailwindMerge({
  extend: {
    theme: {
      text: ['huge'],
    },
  },
});

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

twMerge（設定なし）: rounded bg-sky-600 px-4 py-2 text-amber-300
twMerge（text に huge を追加）: rounded bg-sky-600 px-4 py-2 text-huge text-amber-300

import { useState } from 'react';

const tabs = ['概要', '設定', '履歴'];

// 選ばれているかどうかは aria-selected に出し、見た目は aria-selected: で切り替える
export function Tabs() {
  const [current, setCurrent] = useState(0);
  return (
    <div role="tablist" className="flex gap-2 border-b border-gray-200">
      {tabs.map((tab, i) => (
        <button
          key={tab}
          role="tab"
          aria-selected={i === current}
          onClick={() => setCurrent(i)}
          className="border-b-2 border-transparent px-3 py-2 text-gray-500 aria-selected:border-sky-600 aria-selected:text-sky-700"
        >
          {tab}
        </button>
      ))}
    </div>
  );
}

「設定」をクリック
概要 {"selected":"false","border":"rgba(0, 0, 0, 0)","color":"oklch(0.551 0.027 264.364)"}
設定 {"selected":"true","border":"oklch(0.588 0.158 241.966)","color":"oklch(0.5 0.134 242.749)"}
履歴 {"selected":"false","border":"rgba(0, 0, 0, 0)","color":"oklch(0.551 0.027 264.364)"}