Tailwind CSSチートシート：よく使うクラス・レスポンシブ・v4の変更点まとめ

はじめに

Tailwind CSSはユーティリティファーストのCSSフレームワークです。クラス名をHTMLに直接書くことでスタイルを組み立てます。この記事ではよく使うクラス、レスポンシブ対応、ダークモード、v4の変更点をまとめます。

インストール（v4）

npm install tailwindcss @tailwindcss/vite

v4ではCSSファイルに1行書くだけで使えます。tailwind.config.js は不要です。

/* app.css */
@import "tailwindcss";

v3まではJavaScriptの設定ファイルが必要でした。

# v3 の場合
npm install -D tailwindcss
npx tailwindcss init

レイアウト

Flexbox

<div class="flex items-center justify-between gap-4">
  <div>左</div>
  <div>右</div>
</div>

クラス	説明
`flex`	`display: flex`
`inline-flex`	`display: inline-flex`
`flex-col`	縦方向に並べる
`flex-row`	横方向に並べる（デフォルト）
`flex-wrap`	折り返しあり
`items-center`	交差軸方向に中央揃え
`items-start`	交差軸方向に上揃え
`items-end`	交差軸方向に下揃え
`justify-center`	主軸方向に中央揃え
`justify-between`	両端揃え
`justify-end`	右端揃え
`gap-4`	要素間のスペース（1rem）
`flex-1`	余白を均等に分ける
`shrink-0`	縮まないようにする

Grid

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

クラス	説明
`grid`	`display: grid`
`grid-cols-{n}`	n列のグリッド（1〜12）
`col-span-{n}`	n列分を占有
`grid-rows-{n}`	n行のグリッド
`row-span-{n}`	n行分を占有
`gap-{n}`	行・列両方のギャップ
`gap-x-{n}`	列方向のギャップ
`gap-y-{n}`	行方向のギャップ

スペーシング

スペースのスケール：4 = 1rem = 16px

クラス	値
`p-0`	`0`
`p-1`	`0.25rem` (4px)
`p-2`	`0.5rem` (8px)
`p-4`	`1rem` (16px)
`p-8`	`2rem` (32px)
`p-px`	`1px`

p（padding）、m（margin）、方向は t/r/b/l/x/y で指定。

<div class="px-4 py-2">   <!-- 左右16px 上下8px のpadding -->
<div class="mt-8 mb-4">   <!-- 上32px 下16px のmargin -->
<div class="mx-auto">     <!-- 左右autoで中央寄せ -->

サイジング

<div class="w-full h-screen">全幅・ビューポート高さ</div>
<div class="w-1/2 max-w-lg">半幅・最大幅32rem</div>

クラス	値
`w-full`	`100%`
`w-screen`	`100vw`
`w-auto`	`auto`
`w-1/2`	`50%`
`w-1/3`	`33.333%`
`w-64`	`16rem` (256px)
`min-w-0`	`min-width: 0`
`max-w-sm`	`24rem`
`max-w-md`	`28rem`
`max-w-lg`	`32rem`
`max-w-xl`	`36rem`
`max-w-2xl`	`42rem`
`max-w-full`	`100%`
`h-full`	`100%`
`h-screen`	`100vh`
`h-auto`	`auto`
`min-h-screen`	`min-height: 100vh`

タイポグラフィ

<h1 class="text-2xl font-bold text-gray-900">見出し</h1>
<p class="text-base text-gray-600 leading-relaxed">本文</p>

フォントサイズ

クラス	サイズ
`text-xs`	`0.75rem` (12px)
`text-sm`	`0.875rem` (14px)
`text-base`	`1rem` (16px)
`text-lg`	`1.125rem` (18px)
`text-xl`	`1.25rem` (20px)
`text-2xl`	`1.5rem` (24px)
`text-3xl`	`1.875rem` (30px)
`text-4xl`	`2.25rem` (36px)

フォントウェイト・スタイル

クラス	説明
`font-normal`	400
`font-medium`	500
`font-semibold`	600
`font-bold`	700
`italic`	イタリック
`not-italic`	イタリック解除
`underline`	下線
`line-through`	取り消し線
`no-underline`	下線なし

行間・文字間・テキスト揃え

クラス	説明
`leading-tight`	`1.25`
`leading-normal`	`1.5`
`leading-relaxed`	`1.625`
`leading-loose`	`2`
`tracking-tight`	文字間を詰める
`tracking-wide`	文字間を広げる
`text-left`	左揃え
`text-center`	中央揃え
`text-right`	右揃え
`truncate`	はみ出したら`…`で省略

カラー

Tailwindは色-明度の形式でカラーを指定します（明度：50〜950）。

<div class="bg-blue-500 text-white">青背景・白文字</div>
<div class="text-gray-700 border border-gray-200">グレー文字・薄いボーダー</div>

プロパティ	プレフィックス
テキスト色	`text-`
背景色	`bg-`
ボーダー色	`border-`
アウトライン色	`outline-`
リング色	`ring-`

主なカラー：slate gray zinc red orange yellow green teal blue indigo violet purple pink

<div class="bg-gray-50 text-gray-900">      <!-- 薄いグレー背景 -->
<div class="bg-blue-600 text-white">         <!-- 濃いめの青 -->
<div class="text-red-500">                   <!-- エラー赤 -->
<div class="bg-emerald-100 text-emerald-800"> <!-- 緑のバッジ -->

ボーダー・角丸・シャドウ

<div class="border border-gray-200 rounded-lg shadow-md p-4">カード</div>

ボーダー

クラス	説明
`border`	`border-width: 1px`
`border-2`	`2px`
`border-0`	ボーダーなし
`border-t`	上のみ
`border-b`	下のみ

角丸

クラス	値
`rounded`	`0.25rem`
`rounded-md`	`0.375rem`
`rounded-lg`	`0.5rem`
`rounded-xl`	`0.75rem`
`rounded-2xl`	`1rem`
`rounded-full`	`9999px`（円形）
`rounded-none`	角丸なし

シャドウ

クラス	説明
`shadow-sm`	薄いシャドウ
`shadow`	標準
`shadow-md`	中程度
`shadow-lg`	大きめ
`shadow-xl`	特大
`shadow-none`	なし

レスポンシブ

ブレークポイントプレフィックスを付けると、その幅以上で適用されます（モバイルファースト）。

プレフィックス	最小幅
`sm:`	640px
`md:`	768px
`lg:`	1024px
`xl:`	1280px
`2xl:`	1536px

<!-- モバイル: 1列、タブレット以上: 2列、PC以上: 3列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

<!-- モバイル: 非表示、md以上: 表示 -->
<div class="hidden md:block">

<!-- モバイル: テキスト小、lg以上: テキスト大 -->
<h1 class="text-xl lg:text-4xl font-bold">

ホバー・フォーカス・アクティブ

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white px-4 py-2 rounded">
  ボタン
</button>

<input class="border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 rounded px-3 py-2">

プレフィックス	タイミング
`hover:`	マウスオーバー
`focus:`	フォーカス時
`active:`	クリック中
`disabled:`	disabled 属性あり
`group-hover:`	親要素ホバー時
`peer-focus:`	兄弟要素フォーカス時

ダークモード

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  ダークモード対応テキスト
</div>

v4ではCSSの @media (prefers-color-scheme: dark) を自動で参照します。クラスで制御する場合は @variant dark で設定できます。

よく使うパターン

ボタン

<!-- プライマリボタン -->
<button class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded-lg transition-colors">
  送信する
</button>

<!-- アウトラインボタン -->
<button class="border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium px-4 py-2 rounded-lg transition-colors">
  キャンセル
</button>

カード

<div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
  <h2 class="text-lg font-semibold text-gray-900 mb-2">タイトル</h2>
  <p class="text-gray-600 text-sm">説明テキスト</p>
</div>

バッジ

<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
  公開
</span>

ナビバー

<nav class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
  <span class="font-bold text-lg">ロゴ</span>
  <div class="flex items-center gap-6">
    <a href="#" class="text-gray-600 hover:text-gray-900 text-sm">リンク</a>
    <button class="bg-blue-600 text-white text-sm px-3 py-1.5 rounded-lg">CTA</button>
  </div>
</nav>

入力フォーム

<div class="space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">メールアドレス</label>
    <input
      type="email"
      class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
    >
  </div>
</div>

v3 → v4 の主な変更点

項目	v3	v4
設定ファイル	`tailwind.config.js`	`@import "tailwindcss"` のみ
CSS変数	`theme()` 関数	`var(--color-blue-500)` で参照可
コンテンツ指定	`content: [...]`	自動検出
プレフィックス	`@layer utilities {}`	`@utility` ディレクティブ
ビルド	PostCSS	Lightning CSS（高速化）

まとめ

やりたいこと	クラス例
横並び	`flex items-center gap-4`
グリッド	`grid grid-cols-3 gap-4`
中央寄せ	`mx-auto` / `flex justify-center`
全幅	`w-full`
パディング	`p-4` / `px-6 py-3`
ボタン	`bg-blue-600 text-white px-4 py-2 rounded-lg`
カード	`border border-gray-200 rounded-xl shadow-sm p-6`
レスポンシブ	`md:grid-cols-2 lg:grid-cols-3`
ホバー	`hover:bg-blue-700`
ダークモード	`dark:bg-gray-900`