Tailwind CSS
エンジニアのためのWebチートシート

Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。クラス名を組み合わせるだけで、カスタムデザインを素早く構築できます。レイアウト、スペーシング、タイポグラフィ、カラーなど、よく使うクラスをチートシートにまとめました。

レイアウト

Display

要素の表示方法を制御します。

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

Position

要素の配置方法を制御します。

<div class="static">static (default)</div>
<div class="relative">relative</div>
<div class="absolute top-0 left-0">absolute</div>
<div class="fixed top-0 right-0">fixed</div>
<div class="sticky top-0">sticky</div>

Overflow

要素のオーバーフロー動作を制御します。

<div class="overflow-auto">auto</div>
<div class="overflow-hidden">hidden</div>
<div class="overflow-visible">visible</div>
<div class="overflow-scroll">scroll</div>
<div class="overflow-x-auto">x-auto</div>
<div class="overflow-y-auto">y-auto</div>

Z-Index

要素の重なり順序を制御します。

<div class="z-0">z-0</div>
<div class="z-10">z-10</div>
<div class="z-20">z-20</div>
<div class="z-30">z-30</div>
<div class="z-40">z-40</div>
<div class="z-50">z-50</div>
<div class="z-auto">z-auto</div>

Flexbox & Grid

Flexbox

Flexboxレイアウトのクラス一覧です。

<div class="flex">flex container</div>
<div class="flex-row">row (default)</div>
<div class="flex-col">column</div>
<div class="flex-wrap">wrap</div>
<div class="flex-nowrap">nowrap</div>

<!-- flex item -->
<div class="flex-1">flex: 1 1 0%</div>
<div class="flex-auto">flex: 1 1 auto</div>
<div class="flex-none">flex: none</div>
<div class="grow">flex-grow: 1</div>
<div class="shrink-0">flex-shrink: 0</div>

Grid

Gridレイアウトのクラス一覧です。

<div class="grid grid-cols-3">3 columns</div>
<div class="grid grid-cols-4">4 columns</div>
<div class="grid grid-rows-3">3 rows</div>

<!-- span -->
<div class="col-span-2">span 2 cols</div>
<div class="col-span-full">span all cols</div>
<div class="row-span-2">span 2 rows</div>

<!-- start / end -->
<div class="col-start-2 col-end-4">col 2-4</div>

Gap

FlexboxやGridアイテム間のギャップを制御します。

<div class="gap-0">0px</div>
<div class="gap-1">0.25rem (4px)</div>
<div class="gap-2">0.5rem (8px)</div>
<div class="gap-4">1rem (16px)</div>
<div class="gap-8">2rem (32px)</div>
<div class="gap-x-4">column gap</div>
<div class="gap-y-4">row gap</div>

Justify & Align

アイテムの配置と揃えを制御します。

<!-- justify-content -->
<div class="justify-start">start</div>
<div class="justify-center">center</div>
<div class="justify-end">end</div>
<div class="justify-between">between</div>
<div class="justify-around">around</div>

<!-- align-items -->
<div class="items-start">start</div>
<div class="items-center">center</div>
<div class="items-end">end</div>
<div class="items-stretch">stretch</div>

スペーシング

Padding

要素の内側の余白を制御します。

<div class="p-4">all: 1rem</div>
<div class="px-4">x-axis: 1rem</div>
<div class="py-4">y-axis: 1rem</div>
<div class="pt-4">top: 1rem</div>
<div class="pr-4">right: 1rem</div>
<div class="pb-4">bottom: 1rem</div>
<div class="pl-4">left: 1rem</div>

<!-- scale: 0,1,2,3,4,5,6,8,10,12,16,20,24... -->

Margin

要素の外側の余白を制御します。

<div class="m-4">all: 1rem</div>
<div class="mx-auto">horizontal center</div>
<div class="my-4">y-axis: 1rem</div>
<div class="mt-4">top: 1rem</div>
<div class="mr-4">right: 1rem</div>
<div class="mb-4">bottom: 1rem</div>
<div class="ml-4">left: 1rem</div>
<div class="-mt-4">negative: -1rem</div>

Space Between

子要素間のスペースを制御します。

<div class="space-x-4">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

<div class="space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

サイジング

Width

要素の幅を制御します。

<div class="w-0">0px</div>
<div class="w-1">0.25rem</div>
<div class="w-4">1rem</div>
<div class="w-16">4rem</div>
<div class="w-64">16rem</div>
<div class="w-1/2">50%</div>
<div class="w-1/3">33.333%</div>
<div class="w-full">100%</div>
<div class="w-screen">100vw</div>
<div class="w-auto">auto</div>

Height

要素の高さを制御します。

<div class="h-0">0px</div>
<div class="h-4">1rem</div>
<div class="h-16">4rem</div>
<div class="h-64">16rem</div>
<div class="h-full">100%</div>
<div class="h-screen">100vh</div>
<div class="h-dvh">100dvh</div>
<div class="h-auto">auto</div>

Min / Max

最小・最大の幅と高さを制御します。

<div class="min-w-0">min-width: 0px</div>
<div class="min-w-full">min-width: 100%</div>
<div class="max-w-sm">max-width: 24rem</div>
<div class="max-w-md">max-width: 28rem</div>
<div class="max-w-lg">max-width: 32rem</div>
<div class="max-w-xl">max-width: 36rem</div>
<div class="max-w-screen-xl">max-width: 1280px</div>
<div class="min-h-screen">min-height: 100vh</div>
<div class="max-h-64">max-height: 16rem</div>

タイポグラフィ

<p class="text-xs">0.75rem (12px)</p>
<p class="text-sm">0.875rem (14px)</p>
<p class="text-base">1rem (16px)</p>
<p class="text-lg">1.125rem (18px)</p>
<p class="text-xl">1.25rem (20px)</p>
<p class="text-2xl">1.5rem (24px)</p>
<p class="text-3xl">1.875rem (30px)</p>
<p class="text-4xl">2.25rem (36px)</p>

Font Weight

フォントの太さを制御します。

<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="font-extrabold">800</p>
<p class="font-black">900</p>

Text Align & Decoration

テキストの配置と装飾を制御します。

<!-- align -->
<p class="text-left">left</p>
<p class="text-center">center</p>
<p class="text-right">right</p>

<!-- decoration -->
<p class="underline">underline</p>
<p class="line-through">line-through</p>
<p class="no-underline">none</p>

<!-- transform -->
<p class="uppercase">UPPERCASE</p>
<p class="lowercase">lowercase</p>
<p class="capitalize">Capitalize</p>

<!-- truncate -->
<p class="truncate">truncate...</p>
<p class="line-clamp-3">3 lines max</p>

Text Color

テキストの色を制御します。

<p class="text-black">black</p>
<p class="text-white">white</p>
<p class="text-gray-500">gray-500</p>
<p class="text-red-500">red-500</p>
<p class="text-blue-500">blue-500</p>
<p class="text-green-500">green-500</p>

<!-- 50-950 scale -->
<!-- 50,100,200,300,400,500,600,700,800,900,950 -->

背景

Background Color

背景色を制御します。

<div class="bg-white">white</div>
<div class="bg-black">black</div>
<div class="bg-gray-100">gray-100</div>
<div class="bg-red-500">red-500</div>
<div class="bg-blue-500">blue-500</div>
<div class="bg-green-500">green-500</div>
<div class="bg-transparent">transparent</div>

<!-- opacity -->
<div class="bg-blue-500/50">50% opacity</div>

Gradient

グラデーション背景を適用します。

<div class="bg-gradient-to-r from-blue-500 to-purple-500">
  left to right
</div>
<div class="bg-gradient-to-b from-green-400 to-blue-500">
  top to bottom
</div>
<div class="bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500">
  with via color
</div>

<!-- directions: to-t, to-r, to-b, to-l,
     to-tr, to-br, to-bl, to-tl -->

ボーダー

Border

ボーダーの幅と色を制御します。

<div class="border">1px</div>
<div class="border-2">2px</div>
<div class="border-4">4px</div>
<div class="border-t">top only</div>
<div class="border-b-2">bottom 2px</div>

<!-- color -->
<div class="border-gray-300">gray</div>
<div class="border-red-500">red</div>
<div class="border-blue-500">blue</div>

<!-- style -->
<div class="border-solid">solid</div>
<div class="border-dashed">dashed</div>
<div class="border-dotted">dotted</div>

Border Radius

角丸を制御します。

<div class="rounded-none">0px</div>
<div class="rounded-sm">0.125rem</div>
<div class="rounded">0.25rem</div>
<div class="rounded-md">0.375rem</div>
<div class="rounded-lg">0.5rem</div>
<div class="rounded-xl">0.75rem</div>
<div class="rounded-2xl">1rem</div>
<div class="rounded-full">9999px</div>
<div class="rounded-t-lg">top only</div>
<div class="rounded-l-lg">left only</div>

エフェクト & トランジション

Box Shadow

ボックスシャドウを適用します。

<div class="shadow-sm">small</div>
<div class="shadow">default</div>
<div class="shadow-md">medium</div>
<div class="shadow-lg">large</div>
<div class="shadow-xl">extra large</div>
<div class="shadow-2xl">2x large</div>
<div class="shadow-inner">inner</div>
<div class="shadow-none">none</div>

Opacity

要素の不透明度を制御します。

<div class="opacity-0">0%</div>
<div class="opacity-25">25%</div>
<div class="opacity-50">50%</div>
<div class="opacity-75">75%</div>
<div class="opacity-100">100%</div>

Transition

トランジションを適用します。

<div class="transition">all 150ms</div>
<div class="transition-colors">colors</div>
<div class="transition-opacity">opacity</div>
<div class="transition-transform">transform</div>

<!-- duration -->
<div class="duration-75">75ms</div>
<div class="duration-150">150ms</div>
<div class="duration-300">300ms</div>
<div class="duration-500">500ms</div>

<!-- ease -->
<div class="ease-in">ease-in</div>
<div class="ease-out">ease-out</div>
<div class="ease-in-out">ease-in-out</div>

Transform

変形を適用します。

<!-- scale -->
<div class="scale-50">50%</div>
<div class="scale-100">100%</div>
<div class="scale-150">150%</div>

<!-- rotate -->
<div class="rotate-45">45deg</div>
<div class="rotate-90">90deg</div>
<div class="-rotate-45">-45deg</div>

<!-- translate -->
<div class="translate-x-4">x: 1rem</div>
<div class="translate-y-4">y: 1rem</div>
<div class="-translate-x-1/2">x: -50%</div>

レスポンシブ & 状態

ブレイクポイント

レスポンシブデザインのブレイクポイントです。

<!-- sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px -->

<div class="w-full md:w-1/2 lg:w-1/3">
  responsive width
</div>

<div class="text-sm md:text-base lg:text-lg">
  responsive text
</div>

<div class="flex-col md:flex-row">
  responsive direction
</div>

ダークモード

ダークモード用のスタイルを適用します。

<div class="bg-white dark:bg-gray-900">
  <p class="text-black dark:text-white">
    Dark mode text
  </p>
  <div class="border-gray-200 dark:border-gray-700">
    Dark mode border
  </div>
</div>

Hover / Focus / Active

インタラクション状態のスタイルを適用します。

<!-- hover -->
<button class="bg-blue-500 hover:bg-blue-700">
  Hover me
</button>

<!-- focus -->
<input class="border focus:border-blue-500 focus:ring-2">

<!-- active -->
<button class="bg-blue-500 active:bg-blue-800">
  Active
</button>

<!-- group hover -->
<div class="group">
  <p class="group-hover:text-blue-500">
    Group hover
  </p>
</div>

引用・参考リンク

【公式】Tailwind CSS

Related Cheatsheets

Related Goods

シリーズ40万部突破の大ヒット！ Webサイト制作者必見の一冊です。
詳細をみる
困ったらコレ！目的、やりたいことで引けるリファレンスです。
詳細をみる
保守性の高いCSS設計を学べる一冊！ BEMと対比したPRECSSの手法について解説しています。
詳細をみる
ケーブルに取り付け可能なTypeCとLightningの変換アダプタです。スタイリッシュなデザインで、Apple製品との相性抜群です。
詳細をみる
お気に入りのサウンドデバイスをすぐ取り出せる位置にディスプレイさせておくことができます。
詳細をみる

WebTerm - Recommended tools

WebTermは、ブラウザでLinuxコマンド・Gitコマンドを安全に実行でき、チュートリアル式で学べるターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識を身につける重要性は増しています。実際のターミナルを操作するのに抵抗がある方でも、WebTermはローカル環境を壊す心配がありません。「会員登録不要・無料」で利用でき、学習環境として最適です。

WebTerm

Browser Terminal Sandbox for Learning CLI

開く

All Cheatsheets

エンジニア・プログラマー向けの便利なチートシートを多数まとめています(SP/Tablet/PC対応)

すべてのチートシートを見る

Tailwind CSSエンジニアのためのWebチートシート