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>
タイポグラフィ
Font Size
フォントサイズを制御します。
<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>