component-recipes

コンポーネントのレシピ

概要

デモコンポーネント用の、すぐに使える Tailwind CSS パターンです。

カードのレシピ

基本カード

<div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
  {children}
</div>

クリック可能なカード

<button className="w-full text-left bg-white rounded-lg shadow-md p-6 hover:shadow-lg hover:ring-2 hover:ring-brand-primary/20 transition-all focus:outline-none focus:ring-2 focus:ring-brand-primary">
  {children}
</button>

選択済みカード

<div className="bg-white rounded-lg shadow-md p-6 ring-2 ring-brand-primary">
  {children}
</div>

バッジのレシピ

重要度バッジ

// Safety Hazard
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
  {label}
</span>

// Repair Needed
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
  {label}
</span>

// Maintenance Item
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
  {label}
</span>

// Monitor
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
  {label}
</span>

// Informational
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
  {label}
</span>

条件バッジ

// Excellent
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
  {label}
</span>

// Good
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-lime-100 text-lime-800">
  {label}
</span>

// Fair / Poor (use yellow-100/orange-100)

バッジのサイズ

// Small
className="px-2 py-0.5 text-xs"

// Medium (default)
className="px-2.5 py-0.5 text-xs"

// Large
className="px-3 py-1 text-sm"

ボタンのレシピ

プライマリボタン

<button className="px-4 py-2 bg-brand-primary text-white rounded-md font-medium hover:bg-brand-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary focus:ring-offset-2 transition-colors">
  {label}
</button>

セカンダリボタン

<button className="px-4 py-2 bg-white text-neutral-700 border border-neutral-300 rounded-md font-medium hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-brand-primary focus:ring-offset-2 transition-colors">
  {label}
</button>

ゴーストボタン

<button className="px-4 py-2 text-brand-primary rounded-md font-medium hover:bg-brand-primary/10 focus:outline-none focus:ring-2 focus:ring-brand-primary transition-colors">
  {label}
</button>

アイコンボタン

<button className="p-2 text-neutral-500 rounded-md hover:bg-neutral-100 hover:text-neutral-700 focus:outline-none focus:ring-2 focus:ring-brand-primary transition-colors">
  <Icon className="w-5 h-5" />
</button>

モーダルのレシピ

モーダルオーバーレイ

<div className="fixed inset-0 bg-black/50 backdrop-blur-sm" />

モーダルコンテンツ

<div className="fixed inset-0 flex items-center justify-center p-4">
  <div className="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-auto">
    <div className="p-6">
      {children}
    </div>
  </div>
</div>

モーダルヘッダー

<div className="flex items-center justify-between pb-4 border-b border-neutral-200">
  <h2 className="text-xl font-semibold text-neutral-900">{title}</h2>
  <button className="p-1 text-neutral-400 hover:text-neutral-600 rounded">
    <X className="w-5 h-5" />
  </button>
</div>

入力のレシピ

テキスト入力

<input
  type="text"
  className="w-full px-3 py-2 border border-neutral-300 rounded-md text-neutral-900 placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-primary focus:border-transparent transition-shadow"
  placeholder="Enter text..."
/>

エラー表示付き入力

<input
  className="w-full px-3 py-2 border border-red-500 rounded-md text-neutral-900 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
/>
<p className="mt-1 text-sm text-red-600">{errorMessage}</p>

進捗のレシピ

進捗バー

<div className="w-full h-2 bg-neutral-200 rounded-full overflow-hidden">
  <div
    className="h-full bg-brand-primary transition-all duration-500"
    style={{ width: `${percentage}%` }}
  />
</div>

色付き進捗（条件ベース）

// className based on condition
const progressColor = {
  excellent: 'bg-green-500',
  good: 'bg-lime-500',
  fair: 'bg-yellow-500',
  poor: 'bg-orange-500',
}[condition];

レイアウトのレシピ

ページコンテナー

<div className="min-h-screen bg-neutral-50">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    {children}
  </div>
</div>

カードグリッド

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  {items.map(item => <Card key={item.id} {...item} />)}
</div>

セクションヘッダー

<div className="flex items-center justify-between mb-6">
  <h2 className="text-2xl font-semibold text-neutral-900">{title}</h2>
  <div className="flex items-center gap-2">
    {actions}
  </div>
</div>

ベストプラクティス

• セマンティックなカラー トークン（brand-primary、severity-、condition-）を使用します
• 一貫した間隔（4px グリッド）を維持します
• アクセシビリティのため、フォーカス状態を含めます
• 滑らかなインタラクションのため、トランジションクラスを使用します

アンチパターン

• 16 進数カラーのハードコーディングは禁止
• 一貫性のない border-radius は禁止
• フォーカス状態の欠落は禁止
• 任意の間隔の値は禁止