tailwindcss-design

TailwindCSS のデザインパターン

web-design-mastery スキル向けの TailwindCSS 実装ガイドです。Refactoring UI の原則を Tailwind のユーティリティクラスに変換します。

前提条件： このスキルでは Tailwind 固有の構文を扱います。デザイン理論や意思決定については、web-design-mastery スキルを参照してください。

---

⚠️ 重要：まずプロジェクトのブランドカラーを確認する

汎用カラーを使う前に、必ず tailwind.config.js でカスタムカラーを確認してください。

プロジェクトで primary、secondary、brand などのカスタムカラーを定義している場合は、それらを使ってください：

// tailwind.config.js
colors: {
  primary: { 50: '...', 500: '...', 900: '...' },
  secondary: { ... },
  brand: { ... }
}

優先順位：

1. プロジェクトで定義されたカラー（primary、secondary、brand、accent）
2. 汎用 Tailwind カラー（zinc、gray、slate）はフォールバックとしてのみ使用

プロジェクトカラーを使った例：

<button class="bg-primary-600 hover:bg-primary-700 text-white">
<a class="text-primary-600 hover:text-primary-700">
<div class="border-primary-500 bg-primary-50">
<input class="focus:border-primary-500 focus:ring-primary-500">


<nav class="bg-primary-50 text-primary-700">


<button class="bg-blue-600">  
<button class="bg-zinc-900">  

ルール：

• Primary = メインの CTA、アクティブ状態、リンク、フォーカスリング
• Secondary = 代替アクション、補助要素
• Brand/Accent = 強調、装飾要素
• Neutral（zinc/gray）= 構造、テキスト、境界線のみ

---

余白クラス（4px グリッド）

トークン	サイズ	クラス	用途
1	4px	gap-1、p-1、m-1	ごく小さな隙間
2	8px	gap-2、p-2、m-2	詰めた配置、コンポーネント内
3	12px	gap-3、p-3、m-3	関連する要素
4	16px	gap-4、p-4、m-4	標準のパディング
6	24px	gap-6、p-6、m-6	セクション間
8	32px	gap-8、p-8、m-8	大きな区切り
12	48px	gap-12、p-12	広い余白
16	64px	gap-16、py-16	ヒーローの余白

ルール： デフォルトでは左右対称のパディングにします。pt-6 pb-2 pl-4 pr-8 ではなく p-4 を使います。

---

タイポグラフィクラス

サイズ	クラス	用途
12px	text-xs	ラベル、メタ情報、注記
14px	text-sm	本文、デフォルト
16px	text-base	強調
18px	text-lg	小見出し
20px	text-xl	カードタイトル
24px	text-2xl	ページタイトル
30px	text-3xl	ヒーローの小見出し
36px 以上	text-4xl、text-5xl	ヒーローの見出し

ウェイトクラス：

役割	クラス
本文	font-normal
ラベル	font-medium
見出し	font-semibold

トラッキング（文字間隔）：

<h1 class="text-3xl font-semibold tracking-tight">


<span class="text-xs font-medium uppercase tracking-wide">

---

カラーの階層

テキストカラー（4段階のシステム）

<span class="text-zinc-900">Primary</span>
<span class="text-zinc-600">Secondary</span>
<span class="text-zinc-400">Muted</span>
<span class="text-zinc-300">Faint</span>


<span class="dark:text-zinc-100">Primary</span>
<span class="dark:text-zinc-400">Secondary</span>
<span class="dark:text-zinc-500">Muted</span>
<span class="dark:text-zinc-600">Faint</span>

ステータスカラー

<span class="text-emerald-600 dark:text-emerald-400">Success</span>
<span class="text-amber-600 dark:text-amber-400">Warning</span>
<span class="text-red-600 dark:text-red-400">Error</span>
<span class="text-blue-600 dark:text-blue-400">Info</span>

ブランドカラー（優先順位）

まず tailwind.config.js を確認します。primary／secondary が定義されている場合は、それらを使います：

<button class="bg-primary-600 hover:bg-primary-700">
<a class="text-primary-600 hover:text-primary-700">
<div class="border-primary-500 bg-primary-50">

---

影と奥行きの方針

プロジェクトごとに 1 つ選びます：

方針 A：フラット（境界線）

<div class="border border-zinc-200 dark:border-zinc-800">

方針 B：控えめな浮き上がり

<div class="shadow-sm border border-zinc-200/50">

方針 C：レイヤー（プレミアム）

<div class="shadow-sm ring-1 ring-black/5">

方針 D：サーフェスの変化

<div class="bg-zinc-50"> 
  <div class="bg-white"> 

影のスケール：

レベル	クラス	用途
1	shadow-sm	カード、ボタン
2	shadow	ドロップダウン
3	shadow-md	ポップオーバー
4	shadow-lg	モーダル
5	shadow-xl	全画面オーバーレイ

---

コンポーネントのレシピ

カード

<div class="rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">


<div class="rounded-lg bg-white p-4 shadow-sm ring-1 ring-black/5 dark:bg-zinc-900">

ボタン

<button class="rounded-md bg-zinc-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200">


<button class="rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">


<button class="rounded-md px-3 py-1.5 text-sm font-medium text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100">

入力欄

<input class="w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-zinc-500 focus:outline-none focus:ring-1 focus:ring-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100" />

ナビゲーション項目

<a class="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100">


<a class="flex items-center gap-2 rounded-md bg-zinc-100 px-3 py-2 text-sm font-medium text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100">

---

アニメーションクラス

期間	クラス	用途
150ms	duration-150	ホバー、切り替え
200ms	duration-200	標準的なトランジション
300ms	duration-300	ページ遷移

<div class="transition-all duration-200 ease-out">
<div class="transition-colors duration-150">

段階的なアニメーション：

<div class="animate-fade-in [animation-delay:0ms]">
<div class="animate-fade-in [animation-delay:50ms]">
<div class="animate-fade-in [animation-delay:100ms]">

---

ダークモードのパターン

<div class="bg-white dark:bg-zinc-950">
  <h1 class="text-zinc-900 dark:text-zinc-100">
  <p class="text-zinc-600 dark:text-zinc-400">
  <div class="border-zinc-200 dark:border-zinc-800">

ダークモードでの調整：

• 影より境界線を優先します（影は見えにくくなります）
• ステータスカラーの彩度を少し下げます
• 補助要素のコントラストを下げます

---

アンチパターン

<div class="shadow-2xl">           
<button class="rounded-2xl px-3">  
<div class="pt-8 pb-2 pl-6 pr-3">  
<div class="border-4 border-purple-500"> 
<div class="animate-bounce">       


<div class="shadow-sm">
<button class="rounded-md px-3">
<div class="p-4">
<div class="border border-zinc-200">
<div class="transition-all duration-200">

---

参考ファイル

トピック	ファイル
コンポーネントの奥行きパターン	depth-strategies.md
コンポーネントライブラリ全体	components.md
レスポンシブパターン	responsive.md