Tailwind CSSチートシート

入門 | 15分 で読める | 2025.01.10

公式ドキュメント
TailwindCSSフロントエンド

この記事の要点

• flex・grid・p-4・m-4のユーティリティクラスで高速レイアウト
• レスポンシブはsm:/md:/lg:プレフィックスで制御
• hover:・focus:で状態に応じたスタイルを簡潔に適用

レイアウト

Display

クラス説明
blockブロック要素
inline-blockインラインブロック要素
inlineインライン要素
flexフレックスコンテナ
inline-flexインラインフレックス
gridグリッドコンテナ
hidden非表示

Flexbox

<!-- コンテナ -->
<div class="flex flex-row">横並び</div>
<div class="flex flex-col">縦並び</div>
<div class="flex flex-wrap">折り返し</div>

<!-- 配置 -->
<div class="flex justify-start">左揃え</div>
<div class="flex justify-center">中央</div>
<div class="flex justify-end">右揃え</div>
<div class="flex justify-between">両端揃え</div>
<div class="flex justify-around">均等配置</div>
<div class="flex justify-evenly">均等配置（等間隔）</div>

<div class="flex items-start">上揃え</div>
<div class="flex items-center">中央揃え</div>
<div class="flex items-end">下揃え</div>
<div class="flex items-stretch">伸縮</div>

<!-- アイテム -->
<div class="flex-1">残りを埋める</div>
<div class="flex-none">固定サイズ</div>
<div class="flex-shrink-0">縮小しない</div>
<div class="flex-grow">伸びる</div>

Grid

<div class="grid grid-cols-3">3カラム</div>
<div class="grid grid-cols-4">4カラム</div>
<div class="grid grid-cols-12">12カラム</div>

<!-- レスポンシブ -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  レスポンシブグリッド
</div>

<!-- ギャップ -->
<div class="grid gap-4">16px間隔</div>
<div class="grid gap-x-4 gap-y-2">x:16px y:8px</div>

<!-- スパン -->
<div class="col-span-2">2列分</div>
<div class="col-span-full">全幅</div>

ポイント: flexとgridの使い分け: 1次元（横並び/縦並び）にはFlex、2次元（行と列）にはGridが適しています。

スペーシング

Padding / Margin

<!-- padding -->
<div class="p-4">全方向 16px</div>
<div class="px-4">左右 16px</div>
<div class="py-4">上下 16px</div>
<div class="pt-4">上 16px</div>
<div class="pr-4">右 16px</div>
<div class="pb-4">下 16px</div>
<div class="pl-4">左 16px</div>

<!-- margin -->
<div class="m-4">全方向 16px</div>
<div class="mx-auto">左右中央</div>
<div class="my-4">上下 16px</div>
<div class="mt-4">上 16px</div>
<div class="-mt-4">上 -16px</div>

<!-- スケール -->
<!-- 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24... -->
<!-- 1 = 4px, 4 = 16px, 8 = 32px -->

Gap

<div class="flex gap-4">16px間隔</div>
<div class="flex gap-x-4">横 16px間隔</div>
<div class="flex gap-y-2">縦 8px間隔</div>

サイズ

Width / Height

<!-- 幅 -->
<div class="w-full">100%</div>
<div class="w-1/2">50%</div>
<div class="w-1/3">33.33%</div>
<div class="w-64">256px</div>
<div class="w-screen">100vw</div>
<div class="max-w-md">max-width: 28rem</div>
<div class="max-w-xl">max-width: 36rem</div>
<div class="min-w-0">min-width: 0</div>

<!-- 高さ -->
<div class="h-full">100%</div>
<div class="h-screen">100vh</div>
<div class="h-64">256px</div>
<div class="min-h-screen">min-height: 100vh</div>

実践メモ: スペーシングスケールは1 = 4pxが基本。p-4は16px、m-8は32px。この法則を覚えると数値がすぐ分かります。

タイポグラフィ

フォントサイズ

クラスサイズ
text-xs12px
text-sm14px
text-base16px
text-lg18px
text-xl20px
text-2xl24px
text-3xl30px
text-4xl36px

フォントウェイト

クラスウェイト
font-thin100
font-light300
font-normal400
font-medium500
font-semibold600
font-bold700

テキスト配置

クラス配置
text-left左揃え
text-center中央
text-right右揃え
text-justify両端揃え

色

クラス色
text-gray-500グレー
text-red-500赤
text-blue-500青
text-green-500緑
text-black黒
text-white白

背景・ボーダー

背景色

クラス説明
bg-white白
bg-gray-100薄いグレー
bg-blue-500青
bg-gradient-to-r from-blue-500 to-purple-500グラデーション

ボーダー

クラス説明
border1pxボーダー
border-22pxボーダー
border-gray-300グレーボーダー
border-t上のみ
border-b下のみ
rounded4px角丸
rounded-md6px角丸
rounded-lg8px角丸
rounded-xl12px角丸
rounded-full完全な円

シャドウ

クラス説明
shadow小さな影
shadow-md中程度
shadow-lg大きな影
shadow-xlより大きな影
shadow-none影なし

注意: Tailwindのブレークポイントはモバイルファーストです。md:w-1/2は「768px以上で半分の幅」という意味。指定なしがモバイルの基本スタイルになります。

レスポンシブ

<!-- ブレークポイント -->
<!-- sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px -->

<div class="w-full md:w-1/2 lg:w-1/3">
  レスポンシブ幅
</div>

<div class="flex flex-col md:flex-row">
  モバイル: 縦 / PC: 横
</div>

<div class="hidden md:block">
  md以上で表示
</div>

<div class="md:hidden">
  md未満で表示
</div>

ポイント: hidden md:blockは「モバイルでは非表示、md以上で表示」。逆にmd:hiddenは「md以上で非表示」。レスポンシブの出し分けに必須です。

ホバー・状態

状態クラス例説明
ホバーbg-blue-500 hover:bg-blue-600ホバー時に背景色変更
ホバー透明度opacity-50 hover:opacity-100ホバーで不透明に
フォーカスfocus:ring-2 focus:ring-blue-500フォーカス時にリング表示
アクティブactive:scale-95クリック時に縮小
無効disabled:opacity-50無効時に透明度変更

アニメーション

クラス説明
transition全トランジション
transition-colors色のみ
transition-transform変形のみ
duration-3000.3秒
ease-in-outイージング
hover:scale-105 transition-transformホバーで拡大
animate-spin回転
animate-pulse点滅
animate-bounceバウンス

実践メモ: transitionクラスとhover:を組み合わせるとスムーズなアニメーションに。duration-300で0.3秒のトランジションが定番です。

注意: @applyの多用は避けましょう。Tailwindの利点（HTML上で直接スタイルが分かる）が失われます。共通パターンはコンポーネント化で対応するのがベストプラクティスです。

よく使うパターン

カード

<div class="bg-white rounded-lg shadow-md p-6">
  <h2 class="text-xl font-bold mb-2">タイトル</h2>
  <p class="text-gray-600">説明文</p>
</div>

ボタン

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

インプット

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

中央揃え

<div class="flex items-center justify-center min-h-screen">
  中央
</div>

参考リソース

関連記事

おすすめ記事

実践講座

Tailwind CSS実践ガイド - ユーティリティファーストCSS

CSSTailwind
最新情報

Tailwind CSS v5 (2026) - Oxide エンジン改良と CSS ファースト設定で進化するユーティリティフレームワーク

CSSTailwind CSS
最新情報

Tailwind CSS 4.0 2025 - Oxide Engineで5倍高速化

Tailwind CSSCSS
最新情報

Tailwind CSS v4がリリース - Rustベースの新エンジンで10倍高速化

Tailwind CSSCSS
最新情報

Astro 6 (2026) - Server Islands と View Transitions で変わる静的サイトの未来

Astroフロントエンド
最新情報

現在の未来学 | React Server Components 2026 実用最前線 - RSC安定運用とStreaming SSRの現在地

現在の未来学React

この技術を体系的に学びたいですか？

未来学では東証プライム上場企業のITエンジニアが24時間サポート。月額24,800円から、退会金0円のオンラインIT塾です。

メールで無料相談する
← 一覧に戻る