tailwind-patterns

Tailwind CSS のコンポーネントパターン

ステータス：本番環境で利用可能 ✅ 最終更新日：2026-01-14 Tailwind の互換性：v3.x および v4.x 出典：本番プロジェクト、shadcn/ui のパターン

---

クイックスタート

基本パターン

// Section Container
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
  {/* content */}
</section>

// Card Base
<div className="bg-card text-card-foreground rounded-lg border border-border p-6">
  {/* content */}
</div>

// Button Primary
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
  Click me
</button>

// Responsive Grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* items */}
</div>

---

余白のスケール

一貫した余白を使用すると、デザインのばらつきを防げます。

用途	クラス	出力
狭い余白	gap-2 p-2 space-y-2	0.5rem（8px）
標準の余白	gap-4 p-4 space-y-4	1rem（16px）
ゆとりのある余白	gap-6 p-6 space-y-6	1.5rem（24px）
広い余白	gap-8 p-8 space-y-8	2rem（32px）
セクションの余白	py-16 sm:py-24	4rem/6rem（64px/96px）

標準パターン：4の倍数を使用します（4、6、8、12、16、24）。

---

レスポンシブブレークポイント

モバイルファーストのアプローチ（ベーススタイルはモバイル向けで、より大きなブレークポイントを追加します）。

ブレークポイント	最小幅	パターン	例
ベース	0px	プレフィックスなし	text-base
sm	640px	sm:	sm:text-lg
md	768px	md:	md:grid-cols-2
lg	1024px	lg:	lg:px-8
xl	1280px	xl:	xl:max-w-7xl
2xl	1536px	2xl:	2xl:text-6xl

// Mobile: 1 column, Tablet: 2 columns, Desktop: 3 columns
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

---

コンテナパターン

標準的なページコンテナ

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  {/* content */}
</div>

バリエーション：

• max-w-4xl - 幅の狭いコンテンツ（ブログ記事）
• max-w-5xl - 中程度の幅のコンテンツ
• max-w-6xl - 幅の広いコンテンツ
• max-w-7xl - 全幅（デフォルト）

セクションの余白

<section className="py-16 sm:py-24">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    {/* content */}
  </div>
</section>

---

カードパターン

基本カード

<div className="bg-card text-card-foreground rounded-lg border border-border p-6">
  <h3 className="text-lg font-semibold mb-2">Card Title</h3>
  <p className="text-muted-foreground">Card description goes here.</p>
</div>

アイコン付きの機能カード

<div className="bg-card text-card-foreground rounded-lg border border-border p-6 hover:shadow-lg transition-shadow">
  <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
    {/* Icon */}
  </div>
  <h3 className="text-lg font-semibold mb-2">Feature Title</h3>
  <p className="text-muted-foreground">Feature description.</p>
</div>

料金カード

<div className="bg-card text-card-foreground rounded-lg border-2 border-border p-8 relative">
  <div className="text-sm font-semibold text-primary mb-2">Pro Plan</div>
  <div className="text-4xl font-bold mb-1">$29<span className="text-lg text-muted-foreground">/mo</span></div>
  <p className="text-muted-foreground mb-6">For growing teams</p>
  <button className="w-full bg-primary text-primary-foreground py-2 rounded-md hover:bg-primary/90">
    Get Started
  </button>
</div>

その他のバリエーションについては、references/card-patterns.md を参照してください。

---

グリッドレイアウト

自動レスポンシブグリッド

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

Auto-Fit グリッド（動的な列数）

<div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
  {/* Automatically adjusts columns based on available space */}
</div>

メイソンリースタイルのグリッド

<div className="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
  {items.map(item => (
    <div key={item.id} className="break-inside-avoid">
      <Card {...item} />
    </div>
  ))}
</div>

---

ボタンパターン

// Primary
<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
  Primary
</button>

// Secondary
<button className="bg-secondary text-secondary-foreground px-4 py-2 rounded-md hover:bg-secondary/80">
  Secondary
</button>

// Outline
<button className="border border-border bg-transparent px-4 py-2 rounded-md hover:bg-accent">
  Outline
</button>

// Ghost
<button className="bg-transparent px-4 py-2 rounded-md hover:bg-accent hover:text-accent-foreground">
  Ghost
</button>

// Destructive
<button className="bg-destructive text-destructive-foreground px-4 py-2 rounded-md hover:bg-destructive/90">
  Delete
</button>

サイズのバリエーション：

• 小：px-3 py-1.5 text-sm
• デフォルト：px-4 py-2
• 大：px-6 py-3 text-lg

詳しいリファレンスについては、references/button-patterns.md を参照してください。

---

フォームパターン

入力フィールド

<div className="space-y-2">
  <label htmlFor="email" className="text-sm font-medium">
    Email
  </label>
  <input
    id="email"
    type="email"
    className="w-full px-3 py-2 bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
    placeholder="[email protected]"
  />
</div>

セレクトドロップダウン

<select className="w-full px-3 py-2 bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

チェックボックス

<div className="flex items-center space-x-2">
  <input
    id="terms"
    type="checkbox"
    className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary"
  />
  <label htmlFor="terms" className="text-sm">
    I agree to the terms
  </label>
</div>

エラー状態

<div className="space-y-2">
  <label htmlFor="password" className="text-sm font-medium">
    Password
  </label>
  <input
    id="password"
    type="password"
    className="w-full px-3 py-2 bg-background border border-destructive rounded-md focus:outline-none focus:ring-2 focus:ring-destructive"
  />
  <p className="text-sm text-destructive">Password must be at least 8 characters</p>
</div>

パターン全体については、references/form-patterns.md を参照してください。

---

タイポグラフィパターン

見出し

<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold">
  Page Title
</h1>

<h2 className="text-3xl sm:text-4xl font-bold">
  Section Title
</h2>

<h3 className="text-2xl sm:text-3xl font-semibold">
  Subsection
</h3>

<h4 className="text-xl font-semibold">
  Card Title
</h4>

本文

<p className="text-base text-muted-foreground">
  Regular paragraph text.
</p>

<p className="text-lg text-muted-foreground leading-relaxed">
  Larger body text with comfortable line height.
</p>

<p className="text-sm text-muted-foreground">
  Small supporting text or captions.
</p>

リスト

<ul className="space-y-2 text-muted-foreground">
  <li className="flex items-start">
    <CheckIcon className="h-5 w-5 text-primary mr-2 mt-0.5" />
    <span>Feature one</span>
  </li>
  <li className="flex items-start">
    <CheckIcon className="h-5 w-5 text-primary mr-2 mt-0.5" />
    <span>Feature two</span>
  </li>
</ul>

ガイド全体については、references/typography-patterns.md を参照してください。

---

ナビゲーションパターン

ロゴ付きヘッダー

<header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div className="flex h-16 items-center justify-between">
      <div className="flex items-center gap-8">
        {/* Logo */}
        <a href="/" className="font-bold text-xl">Brand</a>

        {/* Desktop Nav */}
        <nav className="hidden md:flex gap-6">
          <a href="#" className="text-sm hover:text-primary transition-colors">Features</a>
          <a href="#" className="text-sm hover:text-primary transition-colors">Pricing</a>
          <a href="#" className="text-sm hover:text-primary transition-colors">About</a>
        </nav>
      </div>

      {/* CTA */}
      <button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">
        Sign Up
      </button>
    </div>
  </div>
</header>

フッター

<footer className="border-t border-border bg-muted/50">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
      <div>
        <h4 className="font-semibold mb-4">Product</h4>
        <ul className="space-y-2 text-sm text-muted-foreground">
          <li><a href="#" className="hover:text-primary">Features</a></li>
          <li><a href="#" className="hover:text-primary">Pricing</a></li>
        </ul>
      </div>
      {/* More columns */}
    </div>
  </div>
</footer>

モバイルメニューとドロップダウンについては、references/navigation-patterns.md を参照してください。

---

ダークモードへの対応

すべてのパターンでセマンティックカラートークンを使用しており、表示モードに応じて自動的に切り替わります。

トークン	ライトモード	ダークモード
bg-background	白	ダークグレー
text-foreground	ダークグレー	白
bg-card	白	やや明るいグレー
text-muted-foreground	グレー	ライトグレー
border-border	ライトグレー	ダークグレー
bg-primary	ブランドカラー	より明るいブランドカラー

bg-blue-500 のような生の色は使用しないでください。必ずセマンティックトークンを使用してください。

テーマ切り替えの実装については、references/dark-mode-patterns.md を参照してください。

---

よく使うクラスの組み合わせ

見出し付きセクション

<section className="py-16 sm:py-24">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 className="text-3xl sm:text-4xl font-bold text-center mb-12">
      Section Title
    </h2>
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {/* content */}
    </div>
  </div>
</section>

コンテンツの中央揃え

<div className="flex flex-col items-center justify-center text-center">
  <h1 className="text-4xl font-bold mb-4">Centered Title</h1>
  <p className="text-muted-foreground max-w-2xl">Centered description</p>
</div>

ホバーエフェクト

// Lift on hover
<div className="transition-transform hover:scale-105">

// Shadow on hover
<div className="transition-shadow hover:shadow-lg">

// Color change on hover
<button className="transition-colors hover:bg-primary/90">

---

重要なルール

✅ 必ず行うこと

1. セマンティックカラートークン（bg-card、text-foreground）を使用する
2. モバイルファーストのレスポンシブデザイン（base → sm: → md:）を適用する
3. 一貫した余白のスケール（4、6、8、12、16、24）を使用する
4. スムーズなインタラクションのためにtransition-*クラスを追加する
5. ライトモードとダークモードの両方でテストする

❌ 絶対に行わないこと

1. Tailwind の生の色を使用する（bg-blue-500 はテーマに対応できません）
2. レスポンシブプレフィックスを省略する（モバイルユーザーに不便が生じます）
3. 余白のスケールを無計画に混在させる（見た目にまとまりがなくなります）
4. インタラクティブ要素のホバー状態を忘れる
5. テキストに固定の px 値を使う（text-[16px] ではなく text-base を使用する）

---

テンプレートコンポーネント

templates/components/ にすぐに使えるコンポーネントがあります。

• hero-section.tsx - CTA を備えたレスポンシブなヒーローセクション
• feature-grid.tsx - アイコン付きの 3 列の機能グリッド
• contact-form.tsx - バリデーションスタイルを備えた完全なフォーム
• footer.tsx - リンク付きの複数列のフッター

プロジェクトに合わせてコピーしてカスタマイズしてください。

---

参考ドキュメント

Resume Matcher デザインシステム（スイス・インターナショナル・スタイル）

このプロジェクトでは、**スイス・インターナショナル・スタイル（ブルータリスト）**のデザインを採用しています。プロジェクト固有のパターンについては、以下を参照してください。

• style-guide.md - スイススタイルの基本ルール、カラー、タイポグラフィ
• design-system.md - 拡張版のスペーシング、シャドウ、トークン
• swiss-design-system-prompt.md - スイススタイルの UI を生成するための AI プロンプト

スイススタイルの主な調整点：

// NO rounded corners - use rounded-none
<button className="rounded-none border-2 border-black">

// Hard shadows instead of soft
<div className="shadow-[4px_4px_0px_0px_#000000]">

// Hover: translate into shadow space
<button className="hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none">

スイスのカラーパレット：

色	16 進数	用途
キャンバス	#F0F0E8	背景
インク	#000000	テキスト、境界線
ハイパーブルー	#1D4ED8	主なアクション
シグナルグリーン	#15803D	成功
アラートオレンジ	#F97316	警告
アラートレッド	#DC2626	危険

---

公式ドキュメント

• Tailwind CSS：https://tailwindcss.com/docs

---

最終更新日：2026-01-14 スキルバージョン：1.0.0 本番環境：10 件以上のプロジェクトでテスト済み