Tailwind CSSチートシート

概要

Tailwind CSS は、ユーティリティクラスを HTML / JSX に直接組み合わせて UI を作る CSS フレームワークです。このチートシートでは、レイアウト、スペーシング、サイズ、タイポグラフィ、レスポンシブ、状態クラスを実装時に探しやすい形で整理します。

最初に覚える最小セット

Tailwind はモバイルファーストです。指定なしが小さい画面の基本スタイルで、md: や lg: はその幅以上で上書きする指定です。

レイアウト

Display

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>

スペーシング

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>

タイポグラフィ

フォントサイズ

フォントウェイト

テキスト配置

色

背景・ボーダー

背景色

ボーダー

シャドウ

レスポンシブ

<!-- ブレークポイント -->
<!-- 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>

ホバー・状態

アニメーション

よく使うパターン

カード

<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 は、Flex/Grid、余白、サイズ、タイポグラフィ、レスポンシブ接頭辞を覚えると実装速度が上がります。@apply の多用よりも、共通 UI をコンポーネント化してクラスの意図を保つほうが保守しやすくなります。

ブレークポイントや色、スペーシングの正確な値はバージョンや設定で変わるため、公式ドキュメントとプロジェクトの設定を確認してください。

参考リソース

• Tailwind CSS Documentation - 公式ドキュメント
• Tailwind CSS Installation - インストール手順
• Tailwind Play - 公式オンラインプレイグラウンド
• Tailwind CSS Blog - 公式リリース情報

関連記事

• CSS Flexboxチートシート - Flexbox
• CSS Gridチートシート - Grid
• Reactチートシート - React連携

×

PR

×

PR