0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@softbase(FullStack ITエンジニア)

Tailwind CSS Must Know + よく使う UI レシピ集（実務で詰まらないための完全ガイド）

0
Posted at

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」を忘れない
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?