Tailwind CSS チートシート：完全クラスリファレンスガイド

Tailwind CSS はユーティリティファーストの CSS フレームワークで、マークアップ内で直接デザインを構築できます。カスタム CSS を書く代わりに、事前構築されたユーティリティクラスを適用します。この完全な Tailwind CSS チートシートは、すべての主要カテゴリのクラスとその CSS 出力をカバーしています。

なぜ Tailwind CSS？なぜチートシート？

Tailwind CSS には何百ものユーティリティクラスがあります。命名規則は直感的ですが、クイックリファレンスがあれば時間を節約し生産性を向上させます。

スペーシング：パディングとマージン

Tailwind は一貫したスペーシングスケールを使用します。p- または m- の後の数字は rem 値にマッピングされます（0.25rem を掛ける）。負のマージンは -m- プレフィックスを使用します。

Directional Padding & Margin

<!-- Spacing examples -->
<div class="p-4">padding 1rem all sides</div>
<div class="px-6 py-3">horizontal 1.5rem, vertical 0.75rem</div>
<div class="mt-8 mb-4">top margin 2rem, bottom margin 1rem</div>
<div class="mx-auto max-w-lg">centered container</div>
<div class="-mt-4">negative top margin (overlap)</div>
<div class="space-x-4">children spaced 1rem horizontally</div>
<div class="space-y-2">children spaced 0.5rem vertically</div>

タイポグラフィ

フォントサイズ、太さ、行の高さ、文字間隔、テキスト配置、テキストカラーのユーティリティ。

フォントサイズ

フォントウェイト

行の高さ

文字間隔

テキスト配置

テキストカラー

<!-- Text color examples -->
<p class="text-black">text-black → color: #000</p>
<p class="text-white">text-white → color: #fff</p>
<p class="text-gray-500">text-gray-500 → color: #6b7280</p>
<p class="text-red-600">text-red-600 → color: #dc2626</p>
<p class="text-blue-500">text-blue-500 → color: #3b82f6</p>
<p class="text-green-700">text-green-700 → color: #15803d</p>
<p class="text-transparent">text-transparent → color: transparent</p>
<p class="text-current">text-current → color: currentColor</p>

カラー

Tailwind は 50（最も明るい）から 950（最も暗い）の数値カラースケールを使用します。プレフィックス：bg- は背景、text- はテキスト、border- はボーダー。

Color Prefixes

<!-- Available color palettes -->
slate, gray, zinc, neutral, stone    <!-- Grays -->
red, orange, amber, yellow           <!-- Warm -->
lime, green, emerald, teal           <!-- Green -->
cyan, sky, blue, indigo              <!-- Blue -->
violet, purple, fuchsia, pink, rose  <!-- Purple/Pink -->

<!-- Gradient example -->
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
  Gradient background
</div>

Flexbox

柔軟なレイアウトを構築するための包括的な flexbox ユーティリティ。

Justify & Align

Gap

<!-- Flexbox layout examples -->
<!-- Centered content -->
<div class="flex items-center justify-center h-screen">
  <div>Perfectly centered</div>
</div>

<!-- Navbar: logo left, links right -->
<nav class="flex justify-between items-center p-4">
  <div class="text-xl font-bold">Logo</div>
  <div class="flex gap-4">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

<!-- Responsive cards -->
<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[300px]">Card 1</div>
  <div class="flex-1 min-w-[300px]">Card 2</div>
  <div class="flex-1 min-w-[300px]">Card 3</div>
</div>

Grid

2次元レイアウトを作成するための CSS Grid ユーティリティ。

Column & Row Span

<!-- Grid layout examples -->
<!-- 3-column grid -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>  <div>2</div>  <div>3</div>
  <div>4</div>  <div>5</div>  <div>6</div>
</div>

<!-- Responsive grid: 1 col mobile, 2 tablet, 3 desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- Dashboard layout with spanning -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-4">Header (full width)</div>
  <div class="col-span-1">Sidebar</div>
  <div class="col-span-3">Main content</div>
  <div class="col-span-2">Half width</div>
  <div class="col-span-2">Half width</div>
</div>

レイアウト：幅、高さ、コンテナ

要素の寸法とレイアウトコンテナを制御するユーティリティ。

Height & Max/Min

<!-- Layout examples -->
<div class="container mx-auto px-4">
  Centered responsive container
</div>

<div class="max-w-2xl mx-auto">
  Max-width 672px, centered
</div>

<div class="w-full h-screen">
  Full width, full viewport height
</div>

<div class="min-h-screen flex flex-col">
  <main class="flex-1">Content</main>
  <footer>Footer always at bottom</footer>
</div>

ボーダーと角丸

ボーダー幅、スタイル、角丸、リングエフェクトのユーティリティ。

Border Radius

Ring (Outline)

シャドウとエフェクト

ボックスシャドウ、不透明度、ブラーエフェクトのユーティリティ。

Opacity & Blur

トランジションとアニメーション

CSS トランジションとキーフレームアニメーションのユーティリティ。

Duration & Easing

Animations

<!-- Transition examples -->
<button class="bg-blue-500 hover:bg-blue-700 transition-colors duration-200">
  Smooth color change on hover
</button>

<div class="hover:scale-105 transition-transform duration-300 ease-out">
  Scale up on hover
</div>

<div class="hover:shadow-xl transition-shadow duration-300">
  Shadow appears on hover
</div>

<!-- Animation examples -->
<svg class="animate-spin h-5 w-5">...</svg>  <!-- Loading spinner -->
<span class="animate-ping absolute">...</span> <!-- Notification dot -->
<div class="animate-pulse bg-gray-300 h-4 rounded">...</div> <!-- Skeleton -->

レスポンシブプレフィックス

Tailwind はモバイルファーストのレスポンシブデザインを使用します。任意のユーティリティにブレークポイントプレフィックスを付けて適用します。

<!-- Mobile-first responsive design -->

<!-- Stack on mobile, side-by-side on tablet+ -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/3">Sidebar</div>
  <div class="w-full md:w-2/3">Main</div>
</div>

<!-- Responsive text size -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
  Responsive Heading
</h1>

<!-- Responsive grid columns -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

<!-- Hide/show at breakpoints -->
<div class="hidden md:block">Visible on md and above</div>
<div class="block md:hidden">Visible only below md</div>

<!-- Responsive padding -->
<div class="p-4 sm:p-6 md:p-8 lg:p-12">
  Padding grows with screen size
</div>

ステートバリアント

ステートバリアントプレフィックスを使用して条件付きでスタイルを適用します。

<!-- State variant examples -->

<!-- Button with multiple states -->
<button class="bg-blue-500 hover:bg-blue-700 active:bg-blue-800
               focus:outline-none focus:ring-2 focus:ring-blue-300
               disabled:opacity-50 disabled:cursor-not-allowed
               transition-colors duration-200">
  Click me
</button>

<!-- Group hover: parent hover affects child -->
<div class="group p-4 hover:bg-blue-50 rounded-lg">
  <h3 class="group-hover:text-blue-600">Title</h3>
  <p class="group-hover:text-blue-400">Description</p>
</div>

<!-- Dark mode -->
<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  Adapts to light/dark mode
</div>

<!-- Peer: input state affects sibling -->
<input class="peer" type="text" placeholder="Email" />
<p class="invisible peer-invalid:visible text-red-500">
  Invalid email address
</p>

ヒントと高度な使い方

組み込みユーティリティでは不十分な場合のパワーユーザー機能。

任意の値

角括弧を使用してカスタム値を指定：

<!-- Arbitrary values with square brackets -->
<div class="w-[120px]">width: 120px</div>
<div class="h-[calc(100vh-80px)]">height: calc(100vh - 80px)</div>
<div class="bg-[#1a2b3c]">background: #1a2b3c</div>
<div class="text-[22px]">font-size: 22px</div>
<div class="grid-cols-[200px_1fr_200px]">custom grid template</div>
<div class="p-[clamp(1rem,3vw,3rem)]">responsive clamp padding</div>
<div class="text-[color:var(--brand)]">CSS variable color</div>
<div class="top-[var(--header-h)]">CSS variable position</div>

Important 修飾子

任意のユーティリティの前に ! を付けて !important を追加：

<!-- Important modifier with ! prefix -->
<div class="!p-4">padding: 1rem !important</div>
<div class="!mt-0">margin-top: 0 !important</div>
<div class="!text-red-500">color: #ef4444 !important</div>

<!-- Useful for overriding third-party styles -->
<div class="external-widget !bg-transparent !border-none">
  Override library styles
</div>

@apply ディレクティブ

繰り返しのユーティリティパターンをカスタム CSS クラスに抽出：

/* In your CSS file — use @apply to extract components */
.btn {
  @apply px-4 py-2 rounded-lg font-semibold transition-colors duration-200;
}

.btn-primary {
  @apply btn bg-blue-500 text-white hover:bg-blue-700;
}

.btn-secondary {
  @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;
}

.input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md
         focus:outline-none focus:ring-2 focus:ring-blue-500
         focus:border-transparent;
}

.card {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-md p-6
         hover:shadow-lg transition-shadow duration-300;
}

/* Note: Tailwind recommends using utilities directly in HTML
   and only extracting with @apply for truly repeated patterns. */

よくある質問