Tailwind CSSチートシート

レイアウト

Display

<div class="block">...</div>
<div class="inline-block">...</div>
<div class="inline">...</div>
<div class="flex">...</div>
<div class="inline-flex">...</div>
<div class="grid">...</div>
<div class="hidden">...</div>

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>

タイポグラフィ

フォントサイズ

<p class="text-xs">12px</p>
<p class="text-sm">14px</p>
<p class="text-base">16px</p>
<p class="text-lg">18px</p>
<p class="text-xl">20px</p>
<p class="text-2xl">24px</p>
<p class="text-3xl">30px</p>
<p class="text-4xl">36px</p>

フォントウェイト

<p class="font-thin">100</p>
<p class="font-light">300</p>
<p class="font-normal">400</p>
<p class="font-medium">500</p>
<p class="font-semibold">600</p>
<p class="font-bold">700</p>

テキスト配置

<p class="text-left">左揃え</p>
<p class="text-center">中央</p>
<p class="text-right">右揃え</p>
<p class="text-justify">両端揃え</p>

色

<p class="text-gray-500">グレー</p>
<p class="text-red-500">赤</p>
<p class="text-blue-500">青</p>
<p class="text-green-500">緑</p>
<p class="text-black">黒</p>
<p class="text-white">白</p>

背景・ボーダー

背景色

<div class="bg-white">白</div>
<div class="bg-gray-100">薄いグレー</div>
<div class="bg-blue-500">青</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-500">グラデーション</div>

ボーダー

<div class="border">1pxボーダー</div>
<div class="border-2">2pxボーダー</div>
<div class="border-gray-300">グレーボーダー</div>
<div class="border-t">上のみ</div>
<div class="border-b">下のみ</div>

<!-- 角丸 -->
<div class="rounded">4px</div>
<div class="rounded-md">6px</div>
<div class="rounded-lg">8px</div>
<div class="rounded-xl">12px</div>
<div class="rounded-full">完全な円</div>

シャドウ

<div class="shadow">小さな影</div>
<div class="shadow-md">中程度</div>
<div class="shadow-lg">大きな影</div>
<div class="shadow-xl">より大きな影</div>
<div class="shadow-none">影なし</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>

ホバー・状態

<button class="bg-blue-500 hover:bg-blue-600">ホバー</button>
<button class="opacity-50 hover:opacity-100">ホバーで不透明</button>
<input class="focus:ring-2 focus:ring-blue-500" />
<button class="active:scale-95">クリック時</button>
<button class="disabled:opacity-50" disabled>無効</button>

アニメーション

<div class="transition">全トランジション</div>
<div class="transition-colors">色のみ</div>
<div class="transition-transform">変形のみ</div>
<div class="duration-300">0.3秒</div>
<div class="ease-in-out">イージング</div>

<div class="hover:scale-105 transition-transform">ホバーで拡大</div>
<div class="animate-spin">回転</div>
<div class="animate-pulse">点滅</div>
<div class="animate-bounce">バウンス</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>

関連記事

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