Tailwind CSS Cheatsheet

📐 Layout

Display

Class	CSS
block	display: block
inline-block	display: inline-block
inline	display: inline
flex	display: flex
inline-flex	display: inline-flex
grid	display: grid
inline-grid	display: inline-grid
table	display: table
table-cell	display: table-cell
table-row	display: table-row
flow-root	display: flow-root
contents	display: contents
list-item	display: list-item
hidden	display: none

Position

Class	CSS
static	position: static
fixed	position: fixed
absolute	position: absolute
relative	position: relative
sticky	position: sticky
Inset — top / right / bottom / left / inset-x / inset-y / inset
top-0	top: 0px
top-px	top: 1px
top-{n}	top: {n × 0.25rem}
top-1/2	top: 50%
top-full	top: 100%
-top-{n}	top: -{n × 0.25rem}
inset-0	top/right/bottom/left: 0
inset-x-0	left: 0; right: 0
inset-y-0	top: 0; bottom: 0

Z-Index

Class	CSS
z-0	z-index: 0
z-10	z-index: 10
z-20	z-index: 20
z-30	z-index: 30
z-40	z-index: 40
z-50	z-index: 50
z-auto	z-index: auto
-z-10	z-index: -10

Overflow / Visibility / Float

Class	CSS
overflow-auto	overflow: auto
overflow-hidden	overflow: hidden
overflow-clip	overflow: clip
overflow-visible	overflow: visible
overflow-scroll	overflow: scroll
overflow-x-auto	overflow-x: auto
overflow-y-hidden	overflow-y: hidden
Visibility
visible	visibility: visible
invisible	visibility: hidden
collapse	visibility: collapse
Float / Clear
float-right	float: right
float-left	float: left
float-none	float: none
clear-both	clear: both
clearfix	::after { clear: both }

Container / Box Sizing

Class	CSS
container	max-width at each breakpoint
box-border	box-sizing: border-box
box-content	box-sizing: content-box
Isolation / Object Fit
isolate	isolation: isolate
isolation-auto	isolation: auto
object-contain	object-fit: contain
object-cover	object-fit: cover
object-fill	object-fit: fill
object-none	object-fit: none
object-scale-down	object-fit: scale-down
Object Position
object-center	object-position: center
object-top	object-position: top
object-bottom	object-position: bottom
object-left	object-position: left
object-right	object-position: right

Aspect Ratio / Columns

Class	CSS
aspect-auto	aspect-ratio: auto
aspect-square	aspect-ratio: 1 / 1
aspect-video	aspect-ratio: 16 / 9
Columns
columns-1 … 12	columns: 1 … 12
columns-auto	columns: auto
columns-3xs	columns: 16rem
columns-2xl	columns: 42rem
Break
break-after-auto	break-after: auto
break-before-page	break-before: page
break-inside-avoid	break-inside: avoid

⟷ Flexbox

Flex Direction & Wrap

Class	CSS
flex-row	flex-direction: row
flex-row-reverse	flex-direction: row-reverse
flex-col	flex-direction: column
flex-col-reverse	flex-direction: column-reverse
flex-wrap	flex-wrap: wrap
flex-wrap-reverse	flex-wrap: wrap-reverse
flex-nowrap	flex-wrap: nowrap

Justify & Align

Class	CSS
justify-start	justify-content: flex-start
justify-end	justify-content: flex-end
justify-center	justify-content: center
justify-between	justify-content: space-between
justify-around	justify-content: space-around
justify-evenly	justify-content: space-evenly
justify-stretch	justify-content: stretch
items-start	align-items: flex-start
items-end	align-items: flex-end
items-center	align-items: center
items-baseline	align-items: baseline
items-stretch	align-items: stretch
content-start	align-content: flex-start
content-center	align-content: center
content-between	align-content: space-between
self-auto	align-self: auto
self-start	align-self: flex-start
self-center	align-self: center
self-stretch	align-self: stretch
justify-self-auto	justify-self: auto
justify-self-center	justify-self: center

Flex Grow / Shrink / Basis / Order

Class	CSS
flex-1	flex: 1 1 0%
flex-auto	flex: 1 1 auto
flex-initial	flex: 0 1 auto
flex-none	flex: none
grow	flex-grow: 1
grow-0	flex-grow: 0
shrink	flex-shrink: 1
shrink-0	flex-shrink: 0
basis-0	flex-basis: 0px
basis-1/2	flex-basis: 50%
basis-full	flex-basis: 100%
basis-auto	flex-basis: auto
order-first	order: -9999
order-last	order: 9999
order-none	order: 0
order-1 … 12	order: 1 … 12
gap-{n}	gap: {n × 0.25rem}
gap-x-{n}	column-gap: {n × 0.25rem}
gap-y-{n}	row-gap: {n × 0.25rem}

Place Content / Items / Self

Class	CSS
place-content-center	place-content: center
place-content-start	place-content: start
place-content-end	place-content: end
place-content-between	place-content: space-between
place-content-around	place-content: space-around
place-content-evenly	place-content: space-evenly
place-content-baseline	place-content: baseline
place-content-stretch	place-content: stretch
place-items-start	place-items: start
place-items-center	place-items: center
place-items-stretch	place-items: stretch
place-self-auto	place-self: auto
place-self-center	place-self: center

⊞ Grid

Grid Template Columns

Class	CSS
grid-cols-1	grid-template-columns: repeat(1, minmax(0,1fr))
grid-cols-2 … 12	repeat(2…12, minmax(0,1fr))
grid-cols-none	grid-template-columns: none
grid-cols-subgrid	grid-template-columns: subgrid
Column Span
col-auto	grid-column: auto
col-span-1 … 12	grid-column: span 1…12 / span 1…12
col-span-full	grid-column: 1 / -1
col-start-1 … 13	grid-column-start: 1…13
col-start-auto	grid-column-start: auto
col-end-1 … 13	grid-column-end: 1…13

Grid Template Rows

Class	CSS
grid-rows-1 … 6	grid-template-rows: repeat(1…6, minmax(0,1fr))
grid-rows-none	grid-template-rows: none
grid-rows-subgrid	grid-template-rows: subgrid
Row Span
row-auto	grid-row: auto
row-span-1 … 6	grid-row: span 1…6 / span 1…6
row-span-full	grid-row: 1 / -1
row-start-1 … 7	grid-row-start: 1…7
row-end-1 … 7	grid-row-end: 1…7
Auto Flow
grid-flow-row	grid-auto-flow: row
grid-flow-col	grid-auto-flow: column
grid-flow-dense	grid-auto-flow: dense
grid-flow-row-dense	grid-auto-flow: row dense
Auto Cols / Rows
auto-cols-auto	grid-auto-columns: auto
auto-cols-min	grid-auto-columns: min-content
auto-cols-max	grid-auto-columns: max-content
auto-cols-fr	grid-auto-columns: minmax(0,1fr)
auto-rows-fr	grid-auto-rows: minmax(0,1fr)

↕ Spacing

Padding — p / px / py / ps / pe / pt / pr / pb / pl

Scale	rem	px
p-0	0rem	0px
p-px	—	1px
p-0.5	0.125rem	2px
p-1	0.25rem	4px
p-1.5	0.375rem	6px
p-2	0.5rem	8px
p-2.5	0.625rem	10px
p-3	0.75rem	12px
p-3.5	0.875rem	14px
p-4	1rem	16px
p-5	1.25rem	20px
p-6	1.5rem	24px
p-7	1.75rem	28px
p-8	2rem	32px
p-9	2.25rem	36px
p-10	2.5rem	40px
p-11	2.75rem	44px
p-12	3rem	48px
p-14	3.5rem	56px
p-16	4rem	64px
p-20	5rem	80px
p-24	6rem	96px
p-28	7rem	112px
p-32	8rem	128px
p-36	9rem	144px
p-40	10rem	160px
p-44 … 96	11 … 24rem	—

Margin — m / mx / my / ms / me / mt / mr / mb / ml

Class	Notes
m-auto	margin: auto
mx-auto	margin-left/right: auto (centering)
-m-{n}	Negative margin (all sides)
-mx-{n}	Negative horizontal margin
Same scale as padding (0 → 96)
m-0 … m-96	0px → 384px (steps above)
mt-{n}	margin-top
mr-{n}	margin-right
mb-{n}	margin-bottom
ml-{n}	margin-left
ms-{n}	margin-inline-start
me-{n}	margin-inline-end
Space Between (adds margin to children)
space-x-{n}	margin-left on children
space-y-{n}	margin-top on children
space-x-reverse	Reverses space-x direction
space-y-reverse	Reverses space-y direction

↔ Sizing

Width

Class	Value
w-0	0px
w-px	1px
w-0.5 … w-96	0.125rem … 24rem (spacing scale)
w-auto	width: auto
w-1/2	50%
w-1/3	33.333333%
w-2/3	66.666667%
w-1/4 … w-3/4	25% … 75%
w-1/5 … w-4/5	20% … 80%
w-1/6 … w-5/6	16.666% … 83.333%
w-1/12 … w-11/12	8.333% … 91.667%
w-full	100%
w-screen	100vw
w-svw	100svw
w-dvw	100dvw
w-min	min-content
w-max	max-content
w-fit	fit-content

Height / Min / Max

Class	Value
h-0 … h-96	0px … 384px (spacing scale)
h-auto	height: auto
h-px	1px
h-1/2 … h-full	50% … 100%
h-screen	100vh
h-svh	100svh
h-dvh	100dvh
h-min	min-content
h-max	max-content
h-fit	fit-content
Min Width
min-w-0	min-width: 0px
min-w-full	min-width: 100%
min-w-min	min-width: min-content
min-w-max	min-width: max-content
Max Width
max-w-none	max-width: none
max-w-xs	20rem (320px)
max-w-sm	24rem (384px)
max-w-md	28rem (448px)
max-w-lg	32rem (512px)
max-w-xl	36rem (576px)
max-w-2xl … 7xl	42rem … 80rem
max-w-full	100%
max-w-screen-sm…2xl	640px … 1536px
max-w-prose	65ch
Min Height
min-h-0	min-height: 0px
min-h-full	min-height: 100%
min-h-screen	min-height: 100vh
min-h-svh / dvh / lvh	100svh / 100dvh / 100lvh

Aa Typography

Font Size

Class	Size	Line Height
text-xs	0.75rem	1rem
text-sm	0.875rem	1.25rem
text-base	1rem	1.5rem
text-lg	1.125rem	1.75rem
text-xl	1.25rem	1.75rem
text-2xl	1.5rem	2rem
text-3xl	1.875rem	2.25rem
text-4xl	2.25rem	2.5rem
text-5xl	3rem	1
text-6xl	3.75rem	1
text-7xl	4.5rem	1
text-8xl	6rem	1
text-9xl	8rem	1

Font Weight / Style / Family

Class	CSS
font-thin	font-weight: 100
font-extralight	font-weight: 200
font-light	font-weight: 300
font-normal	font-weight: 400
font-medium	font-weight: 500
font-semibold	font-weight: 600
font-bold	font-weight: 700
font-extrabold	font-weight: 800
font-black	font-weight: 900
italic	font-style: italic
not-italic	font-style: normal
font-sans	ui-sans-serif, system-ui…
font-serif	ui-serif, Georgia…
font-mono	ui-monospace, SFMono…
antialiased	-webkit-font-smoothing: antialiased
subpixel-antialiased	-webkit-font-smoothing: auto

Text Alignment / Transform / Decoration

Class	CSS
text-left	text-align: left
text-center	text-align: center
text-right	text-align: right
text-justify	text-align: justify
text-start	text-align: start
text-end	text-align: end
uppercase	text-transform: uppercase
lowercase	text-transform: lowercase
capitalize	text-transform: capitalize
normal-case	text-transform: none
underline	text-decoration-line: underline
overline	text-decoration-line: overline
line-through	text-decoration-line: line-through
no-underline	text-decoration-line: none
decoration-solid	text-decoration-style: solid
decoration-dotted	text-decoration-style: dotted
decoration-dashed	text-decoration-style: dashed
decoration-wavy	text-decoration-style: wavy
decoration-0 … 8	text-decoration-thickness
underline-offset-0…8	text-underline-offset

Line Height / Letter Spacing / Whitespace

Class	CSS
leading-none	line-height: 1
leading-tight	line-height: 1.25
leading-snug	line-height: 1.375
leading-normal	line-height: 1.5
leading-relaxed	line-height: 1.625
leading-loose	line-height: 2
leading-3 … 10	.75rem … 2.5rem
Letter Spacing (tracking)
tracking-tighter	letter-spacing: -0.05em
tracking-tight	letter-spacing: -0.025em
tracking-normal	letter-spacing: 0em
tracking-wide	letter-spacing: 0.025em
tracking-wider	letter-spacing: 0.05em
tracking-widest	letter-spacing: 0.1em
Whitespace / Word Break / Overflow
whitespace-normal	white-space: normal
whitespace-nowrap	white-space: nowrap
whitespace-pre	white-space: pre
whitespace-pre-line	white-space: pre-line
whitespace-pre-wrap	white-space: pre-wrap
whitespace-break-spaces	white-space: break-spaces
break-normal	overflow-wrap: normal; word-break: normal
break-words	overflow-wrap: break-word
break-all	word-break: break-all
break-keep	word-break: keep-all
truncate	overflow: hidden; text-overflow: ellipsis; white-space: nowrap
text-ellipsis	text-overflow: ellipsis
text-clip	text-overflow: clip
hyphens-none	hyphens: none
hyphens-manual	hyphens: manual
hyphens-auto	hyphens: auto
Vertical Align
align-baseline	vertical-align: baseline
align-top	vertical-align: top
align-middle	vertical-align: middle
align-bottom	vertical-align: bottom
align-text-top	vertical-align: text-top
align-sub	vertical-align: sub
align-super	vertical-align: super

🎨 Colors

Usage Pattern: text-{color}-{shade} · bg-{color}-{shade} · border-{color}-{shade} · ring-{color}-{shade} · shadow-{color}/{opacity}

Color Palette — All Colors × All Shades

100

200

300

400

500

600

700

800

900

950

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Text & Background Color

Class	Notes
text-{color}-{shade}	e.g. text-blue-500
text-transparent	color: transparent
text-current	color: currentColor
text-black	color: #000
text-white	color: #fff
text-inherit	color: inherit
text-{color}/{opacity}	e.g. text-blue-500/50
bg-{color}-{shade}	e.g. bg-red-100
bg-transparent	background-color: transparent
bg-inherit	background-color: inherit
bg-{color}/{opacity}	e.g. bg-black/50

Opacity

Class	CSS
opacity-0	opacity: 0
opacity-5	opacity: 0.05
opacity-10	opacity: 0.1
opacity-20	opacity: 0.2
opacity-25	opacity: 0.25
opacity-30	opacity: 0.3
opacity-40	opacity: 0.4
opacity-50	opacity: 0.5
opacity-60	opacity: 0.6
opacity-70	opacity: 0.7
opacity-75	opacity: 0.75
opacity-80	opacity: 0.8
opacity-90	opacity: 0.9
opacity-95	opacity: 0.95
opacity-100	opacity: 1

◈ Backgrounds

Background Properties

Class	CSS
bg-fixed	background-attachment: fixed
bg-local	background-attachment: local
bg-scroll	background-attachment: scroll
bg-clip-border	background-clip: border-box
bg-clip-padding	background-clip: padding-box
bg-clip-content	background-clip: content-box
bg-clip-text	background-clip: text
bg-origin-border	background-origin: border-box
bg-origin-padding	background-origin: padding-box
bg-origin-content	background-origin: content-box
bg-repeat	background-repeat: repeat
bg-no-repeat	background-repeat: no-repeat
bg-repeat-x	background-repeat: repeat-x
bg-repeat-y	background-repeat: repeat-y
bg-repeat-round	background-repeat: round
bg-repeat-space	background-repeat: space
bg-auto	background-size: auto
bg-cover	background-size: cover
bg-contain	background-size: contain
bg-center	background-position: center
bg-top	background-position: top
bg-bottom	background-position: bottom
bg-left	background-position: left
bg-right	background-position: right
bg-left-top	background-position: left top
bg-right-bottom	background-position: right bottom
bg-none	background-image: none

Gradients

Class	CSS
bg-gradient-to-t	to top
bg-gradient-to-tr	to top right
bg-gradient-to-r	to right
bg-gradient-to-br	to bottom right
bg-gradient-to-b	to bottom
bg-gradient-to-bl	to bottom left
bg-gradient-to-l	to left
bg-gradient-to-tl	to top left
Gradient Color Stops
from-{color}-{shade}	--tw-gradient-from: ...
from-transparent	from transparent
via-{color}-{shade}	--tw-gradient-via: ...
to-{color}-{shade}	--tw-gradient-to: ...
from-{color}/{opacity}	e.g. from-blue-500/50
from-0% … from-100%	Start position stop
via-50%	Via position stop
to-100%	End position stop

<!-- Example gradient text -->
<div class="bg-gradient-to-r from-sky-400 to-violet-600
       bg-clip-text text-transparent font-bold">
  Gradient Text
</div>

□ Borders

Border Width & Color

Class	CSS
border	border-width: 1px
border-0	border-width: 0px
border-2	border-width: 2px
border-4	border-width: 4px
border-8	border-width: 8px
border-t-{n}	border-top-width
border-r-{n}	border-right-width
border-b-{n}	border-bottom-width
border-l-{n}	border-left-width
border-x-{n}	border-left + right width
border-y-{n}	border-top + bottom width
border-{color}-{shade}	e.g. border-blue-500
border-{color}/{opacity}	e.g. border-black/10
border-solid	border-style: solid
border-dashed	border-style: dashed
border-dotted	border-style: dotted
border-double	border-style: double
border-hidden	border-style: hidden
border-none	border-style: none
divide-x-{n}	border between children (x)
divide-y-{n}	border between children (y)
divide-{color}-{shade}	Color for divide
divide-solid / dashed	Style for divide

Border Radius

Class	CSS
rounded-none	border-radius: 0px
rounded-sm	border-radius: 0.125rem (2px)
rounded	border-radius: 0.25rem (4px)
rounded-md	border-radius: 0.375rem (6px)
rounded-lg	border-radius: 0.5rem (8px)
rounded-xl	border-radius: 0.75rem (12px)
rounded-2xl	border-radius: 1rem (16px)
rounded-3xl	border-radius: 1.5rem (24px)
rounded-full	border-radius: 9999px
Directional — t / r / b / l / tl / tr / br / bl / ss / se / es / ee
rounded-t-{size}	top-left + top-right
rounded-r-{size}	top-right + bottom-right
rounded-b-{size}	bottom-left + bottom-right
rounded-l-{size}	top-left + bottom-left
rounded-tl-{size}	border-top-left-radius
rounded-tr-{size}	border-top-right-radius
rounded-br-{size}	border-bottom-right-radius
rounded-bl-{size}	border-bottom-left-radius

Outline / Ring

Class	CSS
outline-none	outline: 2px solid transparent; outline-offset: 2px
outline	outline-style: solid
outline-dashed	outline-style: dashed
outline-dotted	outline-style: dotted
outline-0	outline-width: 0px
outline-1 … 8	outline-width: 1px … 8px
outline-{color}	outline-color
outline-offset-0 … 8	outline-offset
Ring (box-shadow based)
ring-0	box-shadow: 0 0 0 0px
ring-1	box-shadow: 0 0 0 1px
ring-2	box-shadow: 0 0 0 2px
ring	box-shadow: 0 0 0 3px
ring-4	box-shadow: 0 0 0 4px
ring-8	box-shadow: 0 0 0 8px
ring-inset	inset box-shadow
ring-{color}	Ring color
ring-offset-0 … 8	Ring offset width
ring-offset-{color}	Ring offset color

✦ Effects & Shadows

Box Shadow

Class	Notes
shadow-sm	0 1px 2px 0 rgb(0 0 0 / 0.05)
shadow	0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
shadow-md	0 4px 6px -1px rgb(0 0 0 / 0.1)…
shadow-lg	0 10px 15px -3px rgb(0 0 0 / 0.1)…
shadow-xl	0 20px 25px -5px rgb(0 0 0 / 0.1)…
shadow-2xl	0 25px 50px -12px rgb(0 0 0 / 0.25)
shadow-inner	inset 0 2px 4px 0 rgb(0 0 0 / 0.05)
shadow-none	box-shadow: 0 0 #0000
shadow-{color}/{opacity}	e.g. shadow-blue-500/50

Mix Blend / Background Blend

Class	CSS
mix-blend-normal	mix-blend-mode: normal
mix-blend-multiply	mix-blend-mode: multiply
mix-blend-screen	mix-blend-mode: screen
mix-blend-overlay	mix-blend-mode: overlay
mix-blend-darken	mix-blend-mode: darken
mix-blend-lighten	mix-blend-mode: lighten
mix-blend-color-dodge	mix-blend-mode: color-dodge
mix-blend-color-burn	mix-blend-mode: color-burn
mix-blend-hard-light	mix-blend-mode: hard-light
mix-blend-soft-light	mix-blend-mode: soft-light
mix-blend-difference	mix-blend-mode: difference
mix-blend-exclusion	mix-blend-mode: exclusion
mix-blend-hue	mix-blend-mode: hue
mix-blend-saturation	mix-blend-mode: saturation
mix-blend-color	mix-blend-mode: color
mix-blend-luminosity	mix-blend-mode: luminosity
mix-blend-plus-lighter	mix-blend-mode: plus-lighter
bg-blend-* — same modes, for background-blend-mode

◉ Filters

Filter Utilities

Class	CSS
blur-none	filter: blur(0)
blur-sm	filter: blur(4px)
blur	filter: blur(8px)
blur-md	filter: blur(12px)
blur-lg	filter: blur(16px)
blur-xl	filter: blur(24px)
blur-2xl	filter: blur(40px)
blur-3xl	filter: blur(64px)
brightness-0 … 200	filter: brightness(0 … 2)
contrast-0 … 200	filter: contrast(0 … 2)
grayscale-0	filter: grayscale(0)
grayscale	filter: grayscale(100%)
hue-rotate-0 … 180	filter: hue-rotate(0deg … 180deg)
-hue-rotate-180	filter: hue-rotate(-180deg)
invert-0	filter: invert(0)
invert	filter: invert(100%)
saturate-0 … 200	filter: saturate(0 … 2)
sepia-0	filter: sepia(0)
sepia	filter: sepia(100%)
drop-shadow-sm	filter: drop-shadow(…)
drop-shadow	filter: drop-shadow(0 1px 2px …)
drop-shadow-md	filter: drop-shadow(0 4px 3px …)
drop-shadow-lg	filter: drop-shadow(0 10px 8px …)
drop-shadow-xl	filter: drop-shadow(0 20px 13px …)
drop-shadow-2xl	filter: drop-shadow(0 25px 25px …)
drop-shadow-none	filter: drop-shadow(0 0 #0000)

Backdrop Filters

Class	CSS
backdrop-blur-none	backdrop-filter: blur(0)
backdrop-blur-sm	backdrop-filter: blur(4px)
backdrop-blur	backdrop-filter: blur(8px)
backdrop-blur-md	backdrop-filter: blur(12px)
backdrop-blur-lg	backdrop-filter: blur(16px)
backdrop-blur-xl	backdrop-filter: blur(24px)
backdrop-blur-2xl	backdrop-filter: blur(40px)
backdrop-blur-3xl	backdrop-filter: blur(64px)
backdrop-brightness-0…200	backdrop-filter: brightness(…)
backdrop-contrast-0…200	backdrop-filter: contrast(…)
backdrop-grayscale	backdrop-filter: grayscale(100%)
backdrop-hue-rotate-0…180	backdrop-filter: hue-rotate(…)
backdrop-invert	backdrop-filter: invert(100%)
backdrop-opacity-0…100	backdrop-filter: opacity(…)
backdrop-saturate-0…200	backdrop-filter: saturate(…)
backdrop-sepia	backdrop-filter: sepia(100%)

⟳ Transforms

Scale / Rotate / Translate / Skew

Class	CSS
scale-0	transform: scale(0)
scale-50	transform: scale(.5)
scale-75	transform: scale(.75)
scale-90	transform: scale(.9)
scale-95	transform: scale(.95)
scale-100	transform: scale(1)
scale-105	transform: scale(1.05)
scale-110	transform: scale(1.1)
scale-125	transform: scale(1.25)
scale-150	transform: scale(1.5)
scale-x-{n}	scaleX only
scale-y-{n}	scaleY only
rotate-0	transform: rotate(0deg)
rotate-1 … 180	rotate(1deg … 180deg)
-rotate-{n}	negative rotation
translate-x-{n}	translateX (spacing scale)
translate-y-{n}	translateY (spacing scale)
translate-x-1/2	translateX(50%)
-translate-x-full	translateX(-100%)
skew-x-0 … 12	skewX(0deg … 12deg)
skew-y-0 … 12	skewY(0deg … 12deg)
-skew-x-{n}	negative skewX
transform-none	transform: none
transform-gpu	translateZ(0) (GPU acceleration)
Transform Origin
origin-center	transform-origin: center
origin-top	transform-origin: top
origin-top-right	transform-origin: top right
origin-right	transform-origin: right
origin-bottom-right	transform-origin: bottom right
origin-bottom	transform-origin: bottom
origin-bottom-left	transform-origin: bottom left
origin-left	transform-origin: left
origin-top-left	transform-origin: top left

⟡ Transitions & Animation

Transitions

Class	CSS
transition-none	transition-property: none
transition-all	transition-property: all
transition	color, bg, border, opacity, shadow, transform…
transition-colors	color, bg-color, border-color, text-decoration-color, fill, stroke
transition-opacity	transition-property: opacity
transition-shadow	transition-property: box-shadow
transition-transform	transition-property: transform
Duration
duration-0	transition-duration: 0ms
duration-75	transition-duration: 75ms
duration-100	transition-duration: 100ms
duration-150	transition-duration: 150ms
duration-200	transition-duration: 200ms
duration-300	transition-duration: 300ms
duration-500	transition-duration: 500ms
duration-700	transition-duration: 700ms
duration-1000	transition-duration: 1000ms
Easing
ease-linear	transition-timing-function: linear
ease-in	cubic-bezier(0.4, 0, 1, 1)
ease-out	cubic-bezier(0, 0, 0.2, 1)
ease-in-out	cubic-bezier(0.4, 0, 0.2, 1)
Delay
delay-0 … delay-1000	transition-delay: 0ms … 1000ms

Animation

Class	CSS
animate-none	animation: none
animate-spin	spin 1s linear infinite
animate-ping	ping 1s cubic-bezier(0,0,0.2,1) infinite
animate-pulse	pulse 2s cubic-bezier(0.4,0,0.6,1) infinite
animate-bounce	bounce 1s infinite

/* Custom animation in tailwind.config.js */
theme: {
  extend: {
    keyframes: {
      wiggle: {
        '0%, 100%': { transform: 'rotate(-3deg)' },
        '50%': { transform: 'rotate(3deg)' }
      }
    },
    animation: {
      wiggle: 'wiggle 1s ease-in-out infinite'
    }
  }
}

⟩ Interactivity

Cursor / Pointer / User Select

Class	CSS
cursor-auto	cursor: auto
cursor-default	cursor: default
cursor-pointer	cursor: pointer
cursor-wait	cursor: wait
cursor-text	cursor: text
cursor-move	cursor: move
cursor-help	cursor: help
cursor-not-allowed	cursor: not-allowed
cursor-none	cursor: none
cursor-context-menu	cursor: context-menu
cursor-crosshair	cursor: crosshair
cursor-grab	cursor: grab
cursor-grabbing	cursor: grabbing
cursor-zoom-in	cursor: zoom-in
cursor-zoom-out	cursor: zoom-out
Pointer Events
pointer-events-none	pointer-events: none
pointer-events-auto	pointer-events: auto
User Select
select-none	user-select: none
select-text	user-select: text
select-all	user-select: all
select-auto	user-select: auto
Resize / Scroll
resize-none	resize: none
resize	resize: both
resize-x	resize: horizontal
resize-y	resize: vertical
scroll-auto	scroll-behavior: auto
scroll-smooth	scroll-behavior: smooth
scroll-m-{n}	scroll-margin (all sides)
scroll-p-{n}	scroll-padding (all sides)
snap-start	scroll-snap-align: start
snap-center	scroll-snap-align: center
snap-end	scroll-snap-align: end
snap-none	scroll-snap-align: none
snap-x	scroll-snap-type: x var(…)
snap-y	scroll-snap-type: y var(…)
snap-mandatory	--tw-scroll-snap-strictness: mandatory
snap-proximity	--tw-scroll-snap-strictness: proximity
snap-always	scroll-snap-stop: always
snap-normal	scroll-snap-stop: normal
touch-auto	touch-action: auto
touch-none	touch-action: none
touch-pan-x	touch-action: pan-x
touch-pan-y	touch-action: pan-y
touch-pinch-zoom	touch-action: pinch-zoom
touch-manipulation	touch-action: manipulation
will-change-auto	will-change: auto
will-change-scroll	will-change: scroll-position
will-change-contents	will-change: contents
will-change-transform	will-change: transform
appearance-none	appearance: none
appearance-auto	appearance: auto
caret-{color}	caret-color: …
accent-{color}	accent-color: …

📱 Responsive Breakpoints

Default Breakpoints (Mobile First)

—

0 → 639px

sm:

≥ 640px

md:

≥ 768px

lg:

≥ 1024px

xl:

≥ 1280px

2xl:

≥ 1536px

Prefix	Min Width	Example
sm:	640px	sm:flex
md:	768px	md:grid-cols-3
lg:	1024px	lg:text-xl
xl:	1280px	xl:px-8
2xl:	1536px	2xl:max-w-7xl
max-sm:	< 640px	max-sm:hidden (v3.2+)
max-md:	< 768px	max-md:text-sm

Pseudo-Class & State Variants

Variant	Triggers When
hover:	:hover
focus:	:focus
focus-within:	:focus-within
focus-visible:	:focus-visible
active:	:active
visited:	:visited
target:	:target
first:	:first-child
last:	:last-child
only:	:only-child
odd:	:nth-child(odd)
even:	:nth-child(even)
first-of-type:	:first-of-type
last-of-type:	:last-of-type
only-of-type:	:only-of-type
empty:	:empty
disabled:	:disabled
enabled:	:enabled
checked:	:checked
indeterminate:	:indeterminate
default:	:default
required:	:required
valid:	:valid
invalid:	:invalid
in-range:	:in-range
out-of-range:	:out-of-range
placeholder-shown:	:placeholder-shown
autofill:	:autofill
read-only:	:read-only
before:	::before
after:	::after
placeholder:	::placeholder
file:	::file-selector-button
marker:	::marker
selection:	::selection
first-line:	::first-line
first-letter:	::first-letter
backdrop:	::backdrop
print:	@media print
motion-safe:	prefers-reduced-motion: no-preference
motion-reduce:	prefers-reduced-motion: reduce
contrast-more:	prefers-contrast: more
contrast-less:	prefers-contrast: less
portrait:	orientation: portrait
landscape:	orientation: landscape
ltr:	[dir="ltr"]
rtl:	[dir="rtl"]
open:	[open]

◐ Dark Mode & Group/Peer

Dark Mode

Variant	Usage
dark:	Applied in dark mode

<!-- In tailwind.config.js -->
darkMode: 'class',  // or 'media'

<!-- In HTML -->
<div class="bg-white dark:bg-gray-900
       text-black dark:text-white">
  Adapts to dark mode
</div>

<!-- Toggle by adding 'dark' to <html> -->
<html class="dark">

Group & Peer Variants

Pattern	Notes
group	Add to parent element
group-hover:	Style child when parent hovered
group-focus:	Style child when parent focused
group-active:	Style child when parent active
group-disabled:	Style child when parent disabled
group/{name}	Named groups (e.g. group/sidebar)
group-hover/{name}:	Scoped to named group
peer	Add to sibling (must come before)
peer-hover:	Style when peer hovered
peer-focus:	Style when peer focused
peer-checked:	Style when peer checked
peer-disabled:	Style when peer disabled
peer/{name}	Named peer

<div class="group">
  <p class="group-hover:text-blue-500">
    Changes on parent hover
  </p>
</div>

<input class="peer" type="checkbox" />
<label class="peer-checked:text-green-500">
  Styled when checkbox checked
</label>

[ ] Arbitrary Values

Arbitrary Value Syntax

Example	Result
w-[247px]	width: 247px
w-[calc(100%-2rem)]	width: calc(100% - 2rem)
h-[50vh]	height: 50vh
text-[14px]	font-size: 14px
text-[#FF0000]	color: #FF0000
bg-[url('/img.png')]	background-image: url('/img.png')
top-[117px]	top: 117px
grid-cols-[1fr_auto]	grid-template-columns: 1fr auto
p-[5px_10px]	Use _ for spaces
font-[900]	font-weight: 900
leading-[3.5rem]	line-height: 3.5rem
tracking-[0.2em]	letter-spacing: 0.2em
rotate-[17deg]	rotate(17deg)
translate-x-[10vw]	translateX(10vw)
skew-y-[8deg]	skewY(8deg)
shadow-[0_35px_60px_rgba(0,0,0,0.3)]	Custom shadow
inset-[10%]	inset: 10%

Arbitrary Properties & Variants

/* Arbitrary CSS property */
<div class="[mask-type:alpha]">
<div class="[--my-var:theme(colors.blue.500)]">

/* Arbitrary variants */
<div class="[&:nth-child(3)]:opacity-0">
<div class="[@media(min-width:900px)]:flex">

/* Modifier stacking */
<div class="dark:hover:md:text-white">
<div class="group-hover:focus:text-blue-500">

⚙ Configuration

tailwind.config.js — Full Reference

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx,vue,svelte}',
    './public/index.html'
  ],
  darkMode: 'class',          // 'media' | 'class' | ['class', '[data-theme="dark"]']
  theme: {
    screens: {               // Override breakpoints
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px'
    },
    extend: {               // Extend without overriding
      colors: {
        brand: { 500: '#FF6B6B', 600: '#FF5252' },
        primary: 'var(--color-primary)',
      },
      fontFamily: {
        display: ['Playfair Display', 'serif'],
        body: ['Inter', 'sans-serif']
      },
      spacing: {
        '128': '32rem',
        '4.5': '1.125rem'
      },
      borderRadius: {
        '4xl': '2rem'
      },
      animation: {
        'spin-slow': 'spin 3s linear infinite',
        'wiggle': 'wiggle 1s ease-in-out infinite'
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' }
        }
      },
      backgroundImage: {
        'hero-pattern': 'url("/img/hero-pattern.svg")',
      },
      gridTemplateColumns: {
        'sidebar': '200px minmax(900px, 1fr) 100px'
      },
      transitionTimingFunction: {
        'spring': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
      },
      zIndex: { '60': 60, '70': 70 },
      maxWidth: { '8xl': '96rem' },
      typography: {             // @tailwindcss/typography plugin
        DEFAULT: { css: { color: '#fff' } }
      }
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
    // Custom plugin
    function({ addUtilities, addComponents, addBase, theme }) {
      addUtilities({
        '.text-shadow': {
          textShadow: '0 2px 4px rgba(0,0,0,.5)'
        }
      })
    }
  ]
}

Directives & Functions

/* CSS Directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Layer custom styles */
@layer base {
  h1 { @apply text-4xl font-bold; }
  * { @apply border-border; }
}
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white
           rounded-lg hover:bg-blue-700 transition;
  }
}
@layer utilities {
  .content-auto { content-visibility: auto; }
}

/* theme() function */
.element {
  background: theme(colors.blue.500);
  padding: theme(spacing.4);
  font-size: theme(fontSize.xl);
}

/* screen() function */
@media screen(sm) {
  .element { display: flex; }
}

@apply & Useful Patterns

/* Center a div */
<div class="flex items-center justify-center">

/* Absolute center */
<div class="absolute top-1/2 left-1/2
       -translate-x-1/2 -translate-y-1/2">

/* Truncate text */
<p class="truncate w-48">

/* Responsive sidebar layout */
<div class="flex flex-col md:flex-row">

/* Card hover lift */
<div class="transition hover:-translate-y-1
       hover:shadow-xl duration-200">

/* Frosted glass */
<div class="bg-white/10 backdrop-blur-md
       border border-white/20 rounded-xl">

/* CSS Grid auto-fill */
<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))]">

≡ Tables & Lists

Tables

Class	CSS
table-auto	table-layout: auto
table-fixed	table-layout: fixed
border-collapse	border-collapse: collapse
border-separate	border-collapse: separate
border-spacing-0	border-spacing: 0px
border-spacing-{n}	border-spacing (spacing scale)
caption-top	caption-side: top
caption-bottom	caption-side: bottom

Lists & SVG

Class	CSS
list-none	list-style-type: none
list-disc	list-style-type: disc
list-decimal	list-style-type: decimal
list-inside	list-style-position: inside
list-outside	list-style-position: outside
list-image-none	list-style-image: none
SVG
fill-none	fill: none
fill-{color}	fill: color value
fill-inherit	fill: inherit
stroke-none	stroke: none
stroke-{color}	stroke: color value
stroke-0	stroke-width: 0
stroke-1	stroke-width: 1
stroke-2	stroke-width: 2

♿ Accessibility & Screen Readers

Screen Readers

Class	Notes
sr-only	Visually hidden but accessible to screen readers
not-sr-only	Undoes sr-only — makes element visible again

<span class="sr-only">Close menu</span>
<svg aria-hidden="true" />

CSS sr-only definition

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}