Tailwind CSSチートシート
検索・印刷可能なTailwind CSSリファレンス。レイアウト、flexbox、grid、スペーシング、タイポグラフィ、色、状態、レスポンシブプレフィックスを網羅。無料。
Layout
12container mx-auto px-4
Centered max-width page container
block / inline-block / inline
Display modes
flex / grid / hidden
Flexbox, grid, or display:none
relative / absolute / fixed / sticky
Position modes
inset-0
top/right/bottom/left: 0
top-4 right-2 bottom-0 left-1/2
Offset a positioned element
z-10 / z-50 / z-[999]
Stacking order (z-index)
overflow-hidden / overflow-y-auto
Clip or scroll overflowing content
float-right / clear-both
Floats (rarely needed)
box-border / box-content
Box sizing model
isolation-isolate
New stacking context
object-cover object-center
Image fill behavior (like bg-size)
Flexbox
12flex flex-row / flex-col
Flex container + direction
flex-wrap / flex-nowrap
Allow or prevent wrapping
items-center / items-start / items-end
Cross-axis alignment
justify-center / justify-between
Main-axis distribution
justify-start / justify-end / justify-around
More main-axis options
gap-4 / gap-x-2 / gap-y-6
Gap between flex/grid children
flex-1
Grow and shrink to fill space
flex-none / flex-auto
Fixed size / natural + grow
grow / grow-0 / shrink-0
Individual grow/shrink control
basis-1/2 / basis-64
Initial main size (flex-basis)
self-center / self-stretch
Per-item cross alignment
order-first / order-2 / order-last
Visual reordering
Grid
12grid grid-cols-3 gap-4
3-column grid with gaps
grid-cols-[200px_1fr]
Custom track sizes (arbitrary)
col-span-2 / col-span-full
Item spans columns
col-start-2 col-end-4
Explicit column placement
grid-rows-3 / row-span-2
Row tracks and spans
grid-flow-col / grid-flow-dense
Auto-placement direction
auto-cols-fr / auto-rows-min
Implicit track sizing
place-items-center
Center items both axes
place-content-center
Center the whole grid content
justify-items-start / content-end
Fine-grained grid alignment
grid-cols-[repeat(auto-fill,minmax(250px,1fr))]
Responsive card grid, no media queries
subgrid
Inherit parent tracks (v4)
Spacing
11p-4
Padding all sides (1rem)
px-4 py-2
Horizontal / vertical padding
pt-2 pr-4 pb-6 pl-8
Per-side padding
m-4 / mx-auto
Margin / horizontal centering
-mt-4
Negative margin
space-y-4
Vertical gap between children
space-x-2
Horizontal gap between children
p-0 p-px p-0.5 p-1 ... p-96
Scale: 1 unit = 0.25rem (4px)
p-[18px]
Arbitrary padding value
ps-4 / pe-4 / ms-auto
Logical (RTL-aware) start/end
scroll-mt-24
Anchor offset under fixed header
Sizing
11w-full / w-screen
100% width / viewport width
w-1/2 w-1/3 w-2/3 w-1/4
Fractional widths
w-64 / w-px / w-[137px]
Fixed widths (scale or arbitrary)
max-w-md / max-w-prose / max-w-7xl
Max width presets
min-w-0
Allow flex children to shrink
h-full / h-screen / h-dvh
Full height (dvh = mobile-safe)
min-h-screen
At least viewport height
max-h-96 overflow-y-auto
Capped height, scroll inside
size-10
Width + height together
w-fit / w-max / w-min
Content-based widths
aspect-square / aspect-video
Aspect ratio boxes
Typography
13text-xs text-sm text-base text-lg text-xl
Font size scale (up to 9xl)
font-normal font-medium font-semibold font-bold
Font weights
italic / not-italic
Font style
text-left / text-center / text-right
Text alignment
leading-tight / leading-relaxed
Line height
tracking-tight / tracking-wide
Letter spacing
uppercase / capitalize / normal-case
Text transform
underline / line-through / no-underline
Text decoration
truncate
One line + ellipsis
whitespace-nowrap / break-words
Wrapping control
font-sans / font-serif / font-mono
Font family stacks
tabular-nums
Fixed-width digits (tables)
text-balance / text-pretty
Nicer heading/paragraph wraps
Colors & backgrounds
12text-gray-700 / text-blue-600
Text color (shades 50–950)
bg-white / bg-slate-900
Background color
bg-blue-500/50
Color with 50% opacity
text-white bg-black
Plain black and white
bg-transparent / bg-current
Transparent / currentColor
bg-gradient-to-r from-blue-500 to-purple-600
Linear gradient
via-pink-500
Gradient middle stop
bg-cover bg-center bg-no-repeat
Background image sizing
bg-[url('/img/hero.jpg')]
Arbitrary background image
text-[#1da1f2]
Arbitrary hex color
accent-blue-600
Checkbox / radio accent color
fill-current / stroke-current
SVG inherits text color
Borders, radius & shadows
12border border-gray-200
1px border with color
border-2 / border-t / border-b-4
Width and per-side borders
border-dashed / border-dotted
Border style
rounded / rounded-lg / rounded-full
Border radius
rounded-t-xl / rounded-l-none
Per-corner/side radius
shadow-sm shadow-md shadow-lg shadow-xl
Box shadow scale
shadow-none
Remove shadow
shadow-blue-500/50
Colored shadow
ring-2 ring-blue-500 ring-offset-2
Focus ring (outline-like)
outline-none focus-visible:ring-2
Accessible focus styling
divide-y divide-gray-200
Borders between children
border-[3px] rounded-[14px]
Arbitrary border values
States & responsive prefixes
14hover:bg-blue-600
On hover
focus:ring-2 / focus-visible:ring-2
On focus (keyboard-aware)
active:scale-95
While pressed
disabled:opacity-50
Disabled form elements
sm: md: lg: xl: 2xl:
Breakpoints 640/768/1024/1280/1536
hidden md:block
Show only from md upward
flex-col md:flex-row
Stack on mobile, row on desktop
dark:bg-gray-900 dark:text-white
Dark mode variant
group + group-hover:opacity-100
Style child on parent hover
peer + peer-checked:block
Style sibling by input state
first:pt-0 last:pb-0 odd:bg-gray-50
Structural pseudo-classes
max-md:hidden
Below a breakpoint only
md:hover:bg-blue-700
Stack variants (order matters)
motion-reduce:transition-none
Respect reduced motion
Transitions & animation
12transition
Animate common properties
transition-colors duration-200
Only colors, 200ms
duration-75 ... duration-1000
Transition duration scale
ease-in / ease-out / ease-in-out
Timing functions
delay-150
Transition delay
hover:scale-105 transition-transform
Grow slightly on hover
rotate-45 / -rotate-90
Rotation
translate-x-4 / -translate-y-1/2
Translation
animate-spin
Loading spinner rotation
animate-pulse
Skeleton loading pulse
animate-bounce / animate-ping
Bounce / radar ping
will-change-transform
Hint for smoother animation
Component recipes
13flex items-center justify-center
Center anything (flex)
grid place-items-center
Center anything (grid)
absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
Absolute centering
truncate
Single-line ellipsis (needs width)
line-clamp-3
Multi-line clamp with ellipsis
aspect-video w-full object-cover
16:9 media that fills its box
sticky top-0 z-50 bg-white/80 backdrop-blur
Frosted sticky header
fixed inset-0 bg-black/50
Modal backdrop overlay
rounded-xl border bg-white p-6 shadow-sm
Basic card
inline-flex items-center gap-2 rounded-lg px-4 py-2
Button base (icon + label)
sr-only
Visually hidden, screen-reader OK
divide-y > li py-3
Clean list with separators
min-h-screen flex flex-col + footer mt-auto
Sticky footer layout
Config & arbitrary values
13w-[137px] / top-[13%]
Arbitrary value in brackets
bg-[#bada55] / text-[22px]
Arbitrary color / font size
grid-cols-[1fr_2fr_1fr]
Underscores stand for spaces
w-[calc(100%-2rem)]
calc() in arbitrary values
text-(--brand-color)
CSS variable shorthand (v4)
[&>li]:mt-2
Arbitrary variant (child selector)
[&:nth-child(3)]:bg-red-100
Arbitrary pseudo selector
has-[:checked]:ring-2
Parent styled by descendant
data-[state=open]:rotate-180
Style by data attribute
@theme { --color-brand: #1e40af; }
v4: design tokens in CSS
theme.extend.colors.brand (v3)
v3: extend tailwind.config.js
@apply flex items-center gap-2;
Reuse utilities in CSS (sparingly)
!mt-0 (v3) / mt-0! (v4)
Important modifier
「:q」に一致する項目はありません。
Tailwind CSSチートシートについて
このTailwind CSSチートシートは、日々使うユーティリティクラスを1つの検索可能なページに一覧にしています。レイアウト、flexbox、grid、スペーシング、サイズ、タイポグラフィ、色と背景、ボーダー、角丸とシャドウ、状態とレスポンシブプレフィックス、トランジションとアニメーション、コンポーネントのレシピ、設定と任意の値です。
各行はクラスと実際の動作を対にしているため、両方向の対応表として使えます。知っているCSSプロパティに対応するユーティリティを調べることも、他人のマークアップにある見慣れないクラスが何をしているか確認することもできます。
このシートは無料でクライアント側で動作します。検索ボックスで行をリアルタイムに絞り込み、追従する目次でセクション間を移動し、任意のクラスをワンクリックでコピーし、デスクリファレンスとしてページを印刷できます。
Tailwind CSSチートシートの使い方
- レイアウトとflexboxから色・背景、設定・任意の値まで、各セクションにざっと目を通します。
- justify、gap、shadowなどのクラスやCSSプロパティを検索して、シートをリアルタイムに絞り込みます。
- hover、focus、ダークモード、ブレークポイントのバリアントについては、状態・レスポンシブプレフィックスのセクションに移動します。
- クラスまたはそのコピーアイコンをクリックして、クリップボードにコピーします。
- シートを印刷して、オフラインのTailwindリファレンスとして使います。
よくある質問
レイアウト、flexbox、grid、スペーシング、サイズ、タイポグラフィ、色と背景、ボーダー、角丸とシャドウ、状態とレスポンシブプレフィックス、トランジションとアニメーション、コンポーネントのレシピ、設定と任意の値の12セクションです。
はい。専用のセクションで、sm:、md:、lg:、xl:のブレークポイントに加え、hover:、focus:、active:、disabled:、group-hover:、dark:のバリアントを扱っています。
コンポーネントのレシピのセクションでは、シートの他の部分にあるユーティリティを使って、カード、ボタン、中央揃えのコンテナ、レスポンシブなグリッドといったよくあるパターンを組み立てています。
はい。どの行でもクリックするか、そのコピーアイコンをクリックすれば、簡単な確認表示とともにクラスがクリップボードにコピーされます。
はい、完全無料です。検索・印刷が可能で、登録不要でブラウザ内に表示されます。
人気の検索
tailwind チートシート
tailwind css クラス一覧
tailwind flex クラス
tailwind grid クラス
tailwind スペーシング一覧
tailwind レスポンシブ プレフィックス
tailwind css リファレンス
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。