Tailwind CSS チートシート

ユーティリティファーストCSS 実践リファレンス

Tailwind CSSとは？

Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。事前定義されたクラスをHTMLに直接適用することで、カスタムCSSを書くことなく迅速にUIを構築できます。レスポンシブデザイン、ダークモード、アニメーションなど、モダンなWebデザインに必要な機能がすべて揃っています。

ユーティリティファースト レスポンシブ対応 カスタマイズ可能

レイアウト

Display: 要素の表示方法を制御

block inline-block flex grid hidden inline-flex

Position: 要素の位置を制御

static fixed absolute relative sticky 
<!-- Flexboxレイアウト -->
<div class="flex justify-center items-center gap-4">
  <div>アイテム1</div>
  <div>アイテム2</div>
</div>

スペーシング

Padding (内側の余白): p, px, py, pt, pr, pb, pl

p-0 p-2 p-4 p-8

Margin (外側の余白): m, mx, my, mt, mr, mb, ml

m-0 m-2 m-4 m-auto

● 数値は4px単位（例: p-4 = 16px）

● 方向: x（左右）、y（上下）、t（上）、r（右）、b（下）、l（左）

タイポグラフィ

フォントサイズ:

text-xs text-sm text-base text-lg text-xl text-2xl

フォントウェイト:

font-light font-normal font-medium font-semibold font-bold 
<h1 class="text-3xl font-bold text-gray-900">
  見出しテキスト
</h1>

カラー

テキストカラー: text-{color}-{shade}

text-slate-800 text-blue-600 text-red-500

背景カラー: bg-{color}-{shade}

bg-blue-500
bg-green-500
bg-purple-500

● shadeは50～950（50が最も薄く、950が最も濃い）

● カラー: slate, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

Flexbox

基本設定

flex - Flexbox有効化
inline-flex - インライン
flex-row - 横並び
flex-col - 縦並び
flex-wrap - 折り返し

配置

justify-start - 左寄せ
justify-center - 中央
justify-between - 均等配置
items-start - 上揃え
items-center - 中央揃え

間隔

gap-2 - 間隔8px
gap-4 - 間隔16px
gap-x-4 - 横間隔
gap-y-4 - 縦間隔
<!-- 中央配置カード -->
<div class="flex justify-center items-center min-h-screen">
  <div class="bg-white p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">タイトル</h2>
    <p class="text-gray-600">コンテンツ</p>
  </div>
</div>

Grid

基本グリッド

grid - Grid有効化
grid-cols-2 - 2カラム
grid-cols-3 - 3カラム
grid-cols-4 - 4カラム
gap-4 - 間隔16px

カラムスパン

col-span-2 - 2列占有
col-span-3 - 3列占有
row-span-2 - 2行占有
col-start-2 - 2列目開始
<!-- 3カラムレスポンシブグリッド -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white p-4 rounded-lg shadow">カード1</div>
  <div class="bg-white p-4 rounded-lg shadow">カード2</div>
  <div class="bg-white p-4 rounded-lg shadow">カード3</div>
</div>

レスポンシブデザイン

ブレークポイント

sm:
640px～
md:
768px～
lg:
1024px～
xl:
1280px～
2xl:
1536px～
<!-- モバイルは縦並び、タブレット以上は横並び -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/2">左側</div>
  <div class="w-full md:w-1/2">右側</div>
</div>

<!-- テキストサイズをレスポンシブに変更 -->
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
  見出し
</h1>

● プレフィックスなし = モバイルファースト（すべての画面サイズに適用）

● md:以降 = タブレット・PC（768px以上）

● lg:以降 = PC（1024px以上）

ホバー・フォーカス・状態

ホバー

hover:bg-blue-500
hover:text-white
hover:scale-105
hover:shadow-lg

フォーカス

focus:outline-none
focus:ring-2
focus:ring-blue-500
focus:border-blue-500

その他の状態

active:bg-blue-700
disabled:opacity-50
group-hover:text-white
<!-- ホバーエフェクト付きボタン -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg
               transform hover:scale-105 transition duration-200">
  クリック
</button>

<!-- フォーカスリング付き入力欄 -->
<input class="border border-gray-300 rounded-lg px-4 py-2
              focus:outline-none focus:ring-2 focus:ring-blue-500" />

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

ボーダー

border - 1px
border-2 - 2px
border-gray-300 - カラー
border-t - 上のみ

角丸

rounded - 4px
rounded-lg - 8px
rounded-full - 完全な円
rounded-t-lg - 上のみ

シャドウ

shadow-sm - 小
shadow - 中
shadow-lg - 大
shadow-xl - 特大
<!-- カード -->
<div class="bg-white rounded-xl shadow-lg border border-gray-200 p-6">
  <h3 class="text-xl font-bold mb-2">カードタイトル</h3>
  <p class="text-gray-600">カードの内容</p>
</div>

よく使うパターン

プライマリボタン

<button class="bg-blue-500 hover:bg-blue-600
               text-white font-semibold
               px-6 py-3 rounded-lg
               shadow-md hover:shadow-lg
               transition duration-200">
  送信
</button>

入力フォーム

<input type="text"
       class="w-full px-4 py-2
              border border-gray-300
              rounded-lg
              focus:outline-none
              focus:ring-2
              focus:ring-blue-500"
       placeholder="名前を入力" />

中央配置コンテナ

<div class="max-w-4xl mx-auto px-4 py-8">
  <!-- コンテンツ -->
</div>

ナビゲーションバー

<nav class="bg-white shadow-md">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex justify-between
                items-center h-16">
      <div class="text-xl font-bold">
        ロゴ
      </div>
      <div class="flex gap-6">
        <a href="#">ホーム</a>
        <a href="#">概要</a>
      </div>
    </div>
  </div>
</nav>

実務で役立つTips

ダークモード

dark:プレフィックスで簡単実装

dark:bg-slate-800
dark:text-white

カスタムカラー

tailwind.configで独自カラー定義

extend: {
  colors: {...}
}

任意の値

[]で任意の値を指定可能

w-[137px]
top-[117px]
text-[#1da1f2]

PurgeCSS

未使用CSSを自動削除してファイルサイズ削減

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

トランジション

transition - 有効化
duration-200 - 200ms
ease-in-out - イージング

トランスフォーム

scale-105 - 拡大
rotate-45 - 回転
translate-x-4 - 移動
<!-- ホバーで拡大するカード -->
<div class="transform hover:scale-105 transition duration-300
            bg-white p-6 rounded-lg shadow-md">
  カード内容
</div>