Tailwind CSS は「覚え方」を間違えると辛いが、
設計思想と定石パターンを押さえると、最速で UI が組める。

この記事では、

Tailwind CSS の Must Know 知識
実務で 即コピペできる UI レシピ
管理画面 / Web アプリで詰まりやすい 落とし穴

を サンプル付きで網羅的にまとめます。

1. Tailwind CSS の基本思想（最重要）

Tailwind は「CSS を書くフレームワーク」ではなく、

UI を class の組み合わせで構築する設計思想

です。

<button
  class="inline-flex items-center gap-2 rounded-md
         bg-blue-600 px-4 py-2 text-white
         hover:bg-blue-700">
  Save
</button>

スタイルは HTML 側で完結
hover / focus / responsive も class で制御
「CSS ファイルは最小限」

2. レイアウトの基本（Flex / Grid / Gap）

Flex（最頻出）

<div class="flex items-center justify-between gap-4">
  <div class="font-semibold">Title</div>
  <div class="text-sm text-gray-500">Meta</div>
</div>

Grid（レスポンシブ対応）

<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
  <div class="rounded-lg border p-4">A</div>
  <div class="rounded-lg border p-4">B</div>
</div>

3. レスポンシブ設計（モバイルファースト）

Tailwind は モバイルファースト。

<div class="p-4 md:p-8">
  <p class="text-sm md:text-base">Text</p>
</div>

素の class = SP
md: 以降で上書き

4. 状態管理（hover / focus / disabled）

<input
  class="w-full rounded-md border px-3 py-2
         focus:outline-none focus:ring-2 focus:ring-blue-500
         disabled:cursor-not-allowed disabled:bg-gray-100"
/>

✔ フォーカスリングは focus:ring-* が基本

5. ダークモード（`dark:`）

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
  Dark mode ready
</div>

※ html.dark 前提（class 方式）

6. 任意値（Arbitrary Values）

<div class="h-[72px] w-[min(92vw,480px)] shadow-[0_10px_30px_rgba(0,0,0,0.12)]">
  ...
</div>

✔ デザインが微妙に合わない時の 最終手段

7. `@apply` の正しい使い方

.btn {
  @apply inline-flex items-center gap-2 rounded-md px-4 py-2 font-medium;
}
.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700;
}

<button class="btn btn-primary">Save</button>

意味を持つ単位で使う
ユーティリティ削減目的での乱用は NG

8. デザイン一貫性の基本セット

<article class="rounded-lg border bg-white p-6 shadow-sm">
  <h2 class="text-lg font-semibold">Card title</h2>
  <p class="mt-2 text-sm text-gray-600">Description…</p>
</article>

9. アクセシビリティ対応

focus-visible

<a class="rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500" href="#">
  Link
</a>

sr-only

<span class="sr-only">Close</span>

10. フォーム実装の定石

<label class="block">
  <span class="text-sm font-medium text-gray-700">Email</span>
  <input
    class="mt-1 w-full rounded-md border px-3 py-2
           focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
  />
</label>

11. クラスが長くなる問題の対処

UI を component 化
@apply
clsx / classnames

className={clsx(
  "inline-flex rounded-md px-4 py-2",
  primary && "bg-blue-600 text-white"
)}

12. よくある落とし穴

動的 class → ビルドで消える
任意値の乱用 → デザイン崩壊
container / prose の無計画利用

よく使う UI レシピ集

1️⃣ ボタン（variant 別：最重要）

<!-- Primary -->
<button
  class="inline-flex items-center gap-2 rounded-md bg-blue-600 px-4 py-2
         text-sm font-medium text-white
         hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
  Primary
</button>

<!-- Secondary -->
<button
  class="inline-flex items-center gap-2 rounded-md border border-gray-300 px-4 py-2
         text-sm font-medium text-gray-700
         hover:bg-gray-50">
  Secondary
</button>

<!-- Ghost -->
<button
  class="inline-flex items-center gap-2 rounded-md px-4 py-2
         text-sm font-medium text-gray-700
         hover:bg-gray-100">
  Ghost
</button>

<!-- Danger -->
<button
  class="inline-flex items-center gap-2 rounded-md bg-red-600 px-4 py-2
         text-sm font-medium text-white
         hover:bg-red-700">
  Delete
</button>

2️⃣ カード（情報表示の基本形）

<article class="rounded-lg border bg-white p-6 shadow-sm">
  <h3 class="text-base font-semibold text-gray-900">Card Title</h3>
  <p class="mt-2 text-sm text-gray-600">
    Card description text goes here.
  </p>

  <div class="mt-4 flex justify-end gap-2">
    <button class="text-sm text-blue-600 hover:underline">Edit</button>
  </div>
</article>

3️⃣ 入力フォーム（ラベル＋エラー対応）

<label class="block">
  <span class="text-sm font-medium text-gray-700">Email</span>

  <input
    type="email"
    class="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm
           focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
    placeholder="you@example.com"
  />

  <!-- Error -->
  <p class="mt-1 text-sm text-red-600">Invalid email address</p>
</label>

4️⃣ モーダル（背景オーバーレイ込み）

<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
  <div class="w-full max-w-md rounded-lg bg-white p-6 shadow-lg">
    <h2 class="text-lg font-semibold">Confirm</h2>

    <p class="mt-2 text-sm text-gray-600">
      Are you sure you want to proceed?
    </p>

    <div class="mt-6 flex justify-end gap-2">
      <button class="rounded-md px-4 py-2 text-sm hover:bg-gray-100">
        Cancel
      </button>
      <button class="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700">
        OK
      </button>
    </div>
  </div>
</div>

※ 表示制御は JS / フレームワーク側で

5️⃣ トースト（成功 / エラー）

<!-- Success -->
<div class="fixed bottom-4 right-4 rounded-lg bg-green-600 px-4 py-3 text-sm text-white shadow-lg">
  Saved successfully
</div>

<!-- Error -->
<div class="fixed bottom-4 right-4 rounded-lg bg-red-600 px-4 py-3 text-sm text-white shadow-lg">
  Something went wrong
</div>

6️⃣ ナビゲーション（ヘッダー）

<header class="border-b bg-white">
  <div class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4">
    <div class="font-semibold">MyApp</div>

    <nav class="flex items-center gap-4 text-sm">
      <a class="text-gray-600 hover:text-gray-900" href="#">Dashboard</a>
      <a class="text-gray-600 hover:text-gray-900" href="#">Settings</a>
      <button class="rounded-md bg-blue-600 px-3 py-1.5 text-white">
        Login
      </button>
    </nav>
  </div>
</header>

7️⃣ テーブル（管理画面で頻出）

<div class="overflow-x-auto rounded-lg border">
  <table class="w-full text-sm">
    <thead class="bg-gray-50 text-left text-gray-600">
      <tr>
        <th class="px-4 py-2">Name</th>
        <th class="px-4 py-2">Email</th>
        <th class="px-4 py-2">Role</th>
      </tr>
    </thead>
    <tbody class="divide-y">
      <tr class="hover:bg-gray-50">
        <td class="px-4 py-2">Alice</td>
        <td class="px-4 py-2">alice@test.com</td>
        <td class="px-4 py-2">Admin</td>
      </tr>
    </tbody>
  </table>
</div>

8️⃣ バッジ / ステータス表示

<span class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">
  Active
</span>

<span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700">
  Draft
</span>

9️⃣ 空状態（No Data）

<div class="flex flex-col items-center justify-center py-16 text-center">
  <p class="text-sm text-gray-500">No data available</p>
  <button class="mt-4 rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700">
    Create
  </button>
</div>

🔟 よく使うレイアウト骨組み（管理画面）

<div class="flex min-h-screen">
  <!-- Sidebar -->
  <aside class="w-64 border-r bg-gray-50 p-4">
    Sidebar
  </aside>

  <!-- Main -->
  <main class="flex-1 p-6">
    Content
  </main>
</div>

実務での設計Tips（重要）

UI レシピは「コピペ前提」→ component 化
色・余白・角丸は最初に揃える（Design Token）
管理画面：text-sm 基本 / LP：text-base 以上
モーダル・トーストは「z-index / fixed / overlay」を忘れない