tailwind-4

スタイリング判定フロー

Tailwind クラスが存在する?    → className="..."
動的な値?                      → style={{ width: `${x}%` }}
条件付きスタイル?              → cn("base", condition && "variant")
静的なみ?                      → className="..." (cn() は不要)
ライブラリがクラスを使えない?  → var() 定数を持つ style プロパティ

重要なルール

className で var() を絶対に使わない

// ❌ 絶対禁止: className での var()
<div className="bg-[var(--color-primary)]" />
<div className="text-[var(--text-color)]" />

// ✅ 常に: Tailwind の意味的クラスを使う
<div className="bg-primary" />
<div className="text-slate-400" />

16進数カラーを絶対に使わない

// ❌ 絶対禁止: className での 16進数カラー
<p className="text-[#ffffff]" />
<div className="bg-[#1e293b]" />

// ✅ 常に: Tailwind カラークラスを使う
<p className="text-white" />
<div className="bg-slate-800" />

cn() ユーティリティ

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

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

cn() を使う場合

// ✅ 条件付きクラス
<div className={cn("base-class", isActive && "active-class")} />

// ✅ 競合の可能性がある場合のマージ
<button className={cn("px-4 py-2", className)} />  // className が上書きする可能性

// ✅ 複数の条件
<div className={cn(
  "rounded-lg border",
  variant === "primary" && "bg-blue-500 text-white",
  variant === "secondary" && "bg-gray-200 text-gray-800",
  disabled && "opacity-50 cursor-not-allowed"
)} />

cn() を使わない場合

// ❌ 静的クラス - 不要なラッパー
<div className={cn("flex items-center gap-2")} />

// ✅ className を直接使う
<div className="flex items-center gap-2" />

チャート・ライブラリ用スタイル定数

ライブラリが className を受け付けない場合 (例: Recharts):

// ✅ var() を使った定数 - ライブラリプロパティのためのみ
const CHART_COLORS = {
  primary: "var(--color-primary)",
  secondary: "var(--color-secondary)",
  text: "var(--color-text)",
  gridLine: "var(--color-border)",
};

// Recharts での使用 (className は使えない)
<XAxis tick={{ fill: CHART_COLORS.text }} />
<CartesianGrid stroke={CHART_COLORS.gridLine} />

動的な値

// ✅ 本当に動的な値には style プロパティを使う
<div style={{ width: `${percentage}%` }} />
<div style={{ opacity: isVisible ? 1 : 0 }} />

// ✅ テーマ設定には CSS カスタムプロパティを使う
<div style={{ "--progress": `${value}%` } as React.CSSProperties} />

一般的なパターン

Flexbox

<div className="flex items-center justify-between gap-4" />
<div className="flex flex-col gap-2" />
<div className="inline-flex items-center" />

グリッド

<div className="grid grid-cols-3 gap-4" />
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" />

スペーシング

// パディング
<div className="p-4" />           // 全辺
<div className="px-4 py-2" />     // 水平、垂直
<div className="pt-4 pb-2" />     // 上、下

// マージン
<div className="m-4" />
<div className="mx-auto" />       // 水平方向に中央寄せ
<div className="mt-8 mb-4" />

タイポグラフィ

<h1 className="text-2xl font-bold text-white" />
<p className="text-sm text-slate-400" />
<span className="text-xs font-medium uppercase tracking-wide" />

ボーダーとシャドウ

<div className="rounded-lg border border-slate-700" />
<div className="rounded-full shadow-lg" />
<div className="ring-2 ring-blue-500 ring-offset-2" />

状態

<button className="hover:bg-blue-600 focus:ring-2 active:scale-95" />
<input className="focus:border-blue-500 focus:outline-none" />
<div className="group-hover:opacity-100" />

レスポンシブ

<div className="w-full md:w-1/2 lg:w-1/3" />
<div className="hidden md:block" />
<div className="text-sm md:text-base lg:text-lg" />

ダークモード

<div className="bg-white dark:bg-slate-900" />
<p className="text-gray-900 dark:text-white" />

任意の値 (エスケープハッチ)

// ✅ デザインシステムにない一度限りの値なら OK
<div className="w-[327px]" />
<div className="top-[117px]" />
<div className="grid-cols-[1fr_2fr_1fr]" />

// ❌ カラーには使わない - テーマを使う
<div className="bg-[#1e293b]" />  // ダメ