Tailwind CSS Cheatsheet

Every Tailwind CSS utility class in one reference page. Organized by category with the CSS each class produces. Bookmark this page and stop guessing class names.

Spacing Scale

The spacing scale is shared by padding, margin, gap, width, height, and inset utilities. Combine any prefix below with a scale value.

Prefixes

Prefix	CSS Property
p-{n}	padding
px-{n}	padding-left & padding-right
py-{n}	padding-top & padding-bottom
pt-{n}	padding-top
pr-{n}	padding-right
pb-{n}	padding-bottom
pl-{n}	padding-left
m-{n}	margin
mx-{n}	margin-left & margin-right
my-{n}	margin-top & margin-bottom
mt-{n}	margin-top
mr-{n}	margin-right
mb-{n}	margin-bottom
ml-{n}	margin-left
space-x-{n}	horizontal gap between children (margin-left)
space-y-{n}	vertical gap between children (margin-top)
gap-{n}	gap (flex/grid)
gap-x-{n}	column-gap
gap-y-{n}	row-gap

Scale Values

Value	Size
0	0px
px	1px
0.5	0.125rem (2px)
1	0.25rem (4px)
1.5	0.375rem (6px)
2	0.5rem (8px)
2.5	0.625rem (10px)
3	0.75rem (12px)
3.5	0.875rem (14px)
4	1rem (16px)
5	1.25rem (20px)
6	1.5rem (24px)
7	1.75rem (28px)
8	2rem (32px)
9	2.25rem (36px)
10	2.5rem (40px)
11	2.75rem (44px)
12	3rem (48px)
14	3.5rem (56px)
16	4rem (64px)
20	5rem (80px)
24	6rem (96px)
28	7rem (112px)
32	8rem (128px)
36	9rem (144px)
40	10rem (160px)
44	11rem (176px)
48	12rem (192px)
52	13rem (208px)
56	14rem (224px)
60	15rem (240px)
64	16rem (256px)
72	18rem (288px)
80	20rem (320px)
96	24rem (384px)

Typography

Class	font-size / line-height
text-xs	0.75rem / 1rem (12px)
text-sm	0.875rem / 1.25rem (14px)
text-base	1rem / 1.5rem (16px)
text-lg	1.125rem / 1.75rem (18px)
text-xl	1.25rem / 1.75rem (20px)
text-2xl	1.5rem / 2rem (24px)
text-3xl	1.875rem / 2.25rem (30px)
text-4xl	2.25rem / 2.5rem (36px)
text-5xl	3rem / 1 (48px)
text-6xl	3.75rem / 1 (60px)
text-7xl	4.5rem / 1 (72px)
text-8xl	6rem / 1 (96px)
text-9xl	8rem / 1 (128px)

Font Weight

Class	Value / Description
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

Text Utilities

Class	Value / Description
italic	font-style: italic
not-italic	font-style: normal
uppercase	text-transform: uppercase
lowercase	text-transform: lowercase
capitalize	text-transform: capitalize
normal-case	text-transform: none
underline	text-decoration: underline
overline	text-decoration: overline
line-through	text-decoration: line-through
no-underline	text-decoration: none
truncate	overflow: hidden + text-overflow: ellipsis + white-space: nowrap
text-left	text-align: left
text-center	text-align: center
text-right	text-align: right
text-justify	text-align: justify
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
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
font-sans	font-family: system sans-serif stack
font-serif	font-family: serif stack
font-mono	font-family: monospace stack
antialiased	-webkit-font-smoothing: antialiased
subpixel-antialiased	-webkit-font-smoothing: auto

Colors

Tailwind ships with a curated color palette. Apply colors with a prefix, color name, and shade.

Color Prefixes

Pattern	Applies to
text-{color}-{shade}	Text color
bg-{color}-{shade}	Background color
border-{color}-{shade}	Border color
ring-{color}-{shade}	Ring (outline) color
divide-{color}-{shade}	Divider color between children
placeholder-{color}-{shade}	Placeholder text color
accent-{color}-{shade}	Accent color for form controls
decoration-{color}-{shade}	Text decoration color
shadow-{color}-{shade}	Box shadow color
outline-{color}-{shade}	Outline color
fill-{color}-{shade}	SVG fill color
stroke-{color}-{shade}	SVG stroke color

Color Names

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

Shade Scale

50100200300400500600700800900950

Special Colors

inherit — inherits from parent
current — currentColor
transparent — transparent
black / white — #000 / #fff
Arbitrary values: text-[#1a2b3c] or bg-[rgb(255,0,0)]

Sizing (Width & Height)

Class	Value / Description
w-{spacing}	Width using the spacing scale (0-96)
w-auto	width: auto
w-full	width: 100%
w-screen	width: 100vw
w-svw	width: 100svw
w-min	width: min-content
w-max	width: max-content
w-fit	width: fit-content
w-1/2, w-1/3, ...	Fractional widths (1/2 through 11/12)
min-w-0	min-width: 0px
min-w-full	min-width: 100%
min-w-min / max / fit	min-width: min-content / max-content / fit-content
max-w-xs	max-width: 20rem (320px)
max-w-sm	max-width: 24rem (384px)
max-w-md	max-width: 28rem (448px)
max-w-lg	max-width: 32rem (512px)
max-w-xl	max-width: 36rem (576px)
max-w-2xl	max-width: 42rem (672px)
max-w-3xl	max-width: 48rem (768px)
max-w-4xl	max-width: 56rem (896px)
max-w-5xl	max-width: 64rem (1024px)
max-w-6xl	max-width: 72rem (1152px)
max-w-7xl	max-width: 80rem (1280px)
max-w-full	max-width: 100%
max-w-prose	max-width: 65ch
max-w-screen-sm / md / lg / xl / 2xl	max-width at breakpoint widths
max-w-none	max-width: none
h-{spacing}	Height using the spacing scale
h-auto	height: auto
h-full	height: 100%
h-screen	height: 100vh
h-svh	height: 100svh
h-dvh	height: 100dvh
h-min / max / fit	height: min-content / max-content / fit-content
min-h-0 / full / screen / svh / dvh / min / max / fit	min-height variants
max-h-{spacing}	max-height using the spacing scale
max-h-full / screen / svh / dvh / min / max / fit / none	max-height variants
size-{spacing}	Sets both width and height to the same value

Display & Position

Display

Class	Value / Description
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
hidden	display: none
contents	display: contents
flow-root	display: flow-root

Position

Class	Value / Description
static	position: static
fixed	position: fixed
absolute	position: absolute
relative	position: relative
sticky	position: sticky
inset-0	top/right/bottom/left: 0px
inset-x-0	left: 0; right: 0
inset-y-0	top: 0; bottom: 0
top-{n} / right-{n} / bottom-{n} / left-{n}	Position offsets (spacing scale)
z-0 / 10 / 20 / 30 / 40 / 50 / auto	z-index values

Flexbox

Flex Container & Items

Class	Value / Description
flex	display: flex
inline-flex	display: inline-flex
flex-row	flex-direction: row (default)
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
flex-1	flex: 1 1 0% — grow and shrink, ignore initial size
flex-auto	flex: 1 1 auto — grow and shrink, based on initial size
flex-initial	flex: 0 1 auto — shrink but don't grow
flex-none	flex: none — don't grow or shrink
grow	flex-grow: 1
grow-0	flex-grow: 0
shrink	flex-shrink: 1
shrink-0	flex-shrink: 0
basis-{size}	flex-basis (accepts spacing scale or fractions)
order-{n}	order: {n} (1-12, first, last, none)

Alignment & Justification

Class	Value / Description
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
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
self-auto	align-self: auto
self-start	align-self: flex-start
self-end	align-self: flex-end
self-center	align-self: center
self-stretch	align-self: stretch
content-start	align-content: flex-start
content-end	align-content: flex-end
content-center	align-content: center
content-between	align-content: space-between
content-around	align-content: space-around
content-evenly	align-content: space-evenly

Grid

Class	Value / Description
grid	display: grid
inline-grid	display: inline-grid
grid-cols-{n}	grid-template-columns: repeat(n, minmax(0, 1fr)) — 1 to 12
grid-cols-none	grid-template-columns: none
grid-cols-subgrid	grid-template-columns: subgrid
grid-rows-{n}	grid-template-rows: repeat(n, minmax(0, 1fr)) — 1 to 12
grid-rows-none	grid-template-rows: none
col-span-{n}	grid-column: span n / span n — 1 to 12
col-span-full	grid-column: 1 / -1
col-start-{n}	grid-column-start: n — 1 to 13
col-end-{n}	grid-column-end: n — 1 to 13
row-span-{n}	grid-row: span n / span n — 1 to 12
row-span-full	grid-row: 1 / -1
row-start-{n}	grid-row-start: n — 1 to 13
row-end-{n}	grid-row-end: n — 1 to 13
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
grid-flow-col-dense	grid-auto-flow: column dense
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-auto	grid-auto-rows: auto
auto-rows-min	grid-auto-rows: min-content
auto-rows-max	grid-auto-rows: max-content
auto-rows-fr	grid-auto-rows: minmax(0, 1fr)
place-content-center	place-content: center
place-items-center	place-items: center
place-self-center	place-self: center

Borders & Rings

Class	Value / Description
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 / r / b / l	Border on one side only (1px)
border-t-{n}	Border on one side: 0, 2, 4, 8
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
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
rounded-t / r / b / l	Border radius on one side
rounded-tl / tr / br / bl	Border radius on one corner
divide-x	Vertical dividers between horizontal children
divide-y	Horizontal dividers between stacked children
divide-x-{n}	Divider width: 0, 2, 4, 8, reverse
ring-{n}	Box shadow ring: 0, 1, 2, 4, 8 (default 3)
ring-inset	Ring rendered inside the element
ring-offset-{n}	Gap between ring and element: 0, 1, 2, 4, 8
outline-{n}	Outline width: 0, 1, 2, 4, 8
outline-offset-{n}	Outline offset: 0, 1, 2, 4, 8

Shadows

Class	Value / Description
shadow-sm	Small shadow
shadow	Default shadow
shadow-md	Medium shadow
shadow-lg	Large shadow
shadow-xl	Extra-large shadow
shadow-2xl	Huge shadow
shadow-inner	Inner (inset) shadow
shadow-none	No shadow
drop-shadow-sm	Small drop shadow (filter)
drop-shadow	Default drop shadow (filter)
drop-shadow-md	Medium drop shadow (filter)
drop-shadow-lg	Large drop shadow (filter)
drop-shadow-xl	Extra-large drop shadow (filter)
drop-shadow-2xl	Huge drop shadow (filter)
drop-shadow-none	No drop shadow

Responsive Breakpoints

Tailwind is mobile-first. Unprefixed utilities target all screen sizes. Use breakpoint prefixes to apply styles at that width and above.

Prefix	Min Width	CSS
sm:	640px	@media (min-width: 640px)
md:	768px	@media (min-width: 768px)
lg:	1024px	@media (min-width: 1024px)
xl:	1280px	@media (min-width: 1280px)
2xl:	1536px	@media (min-width: 1536px)

Example

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
1 column on mobile, 2 on medium screens, 3 on large screens.

Dark Mode & State Modifiers

Prefix any utility with a modifier to apply it conditionally. Multiple modifiers can be stacked: dark:hover:bg-gray-700.

Modifier	Condition
hover:	On mouse hover
focus:	On focus
focus-within:	When a child has focus
focus-visible:	On keyboard focus (not mouse)
active:	While being pressed
visited:	Visited link
disabled:	Disabled form element
checked:	Checked checkbox/radio
first:	First child
last:	Last child
odd:	Odd children
even:	Even children
group-hover:	When a parent with class 'group' is hovered
peer-focus:	When a sibling with class 'peer' is focused
dark:	Dark mode (prefers-color-scheme: dark or class strategy)
motion-safe:	prefers-reduced-motion: no-preference
motion-reduce:	prefers-reduced-motion: reduce
print:	@media print
portrait:	@media (orientation: portrait)
landscape:	@media (orientation: landscape)
placeholder:	Style placeholder text
selection:	Style selected text
before:	::before pseudo-element (add content-[''])
after:	::after pseudo-element (add content-[''])
file:	Style file input button
marker:	Style list markers
first-line:	::first-line pseudo-element
first-letter:	::first-letter pseudo-element

Dark Mode Example

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
Light background and dark text by default; inverted in dark mode.

Transitions & Animation

Class	Value / Description
transition-none	No transition
transition-all	Transition all properties
transition	Transition color, bg, border, shadow, opacity, transform, filter
transition-colors	Transition color properties only
transition-opacity	Transition opacity only
transition-shadow	Transition shadow only
transition-transform	Transition transform only
duration-{n}	Duration: 0, 75, 100, 150, 200, 300, 500, 700, 1000 (ms)
ease-linear	timing-function: linear
ease-in	timing-function: cubic-bezier(0.4, 0, 1, 1)
ease-out	timing-function: cubic-bezier(0, 0, 0.2, 1)
ease-in-out	timing-function: cubic-bezier(0.4, 0, 0.2, 1)
delay-{n}	Delay: 0, 75, 100, 150, 200, 300, 500, 700, 1000 (ms)
animate-none	No animation
animate-spin	Continuous rotation
animate-ping	Ping/pulse effect
animate-pulse	Gentle pulsing opacity
animate-bounce	Bouncing animation

Misc Utilities

Class	Value / Description
overflow-auto / hidden / visible / scroll	overflow property
overflow-x-auto / overflow-y-auto	Overflow on one axis
overscroll-auto / contain / none	overscroll-behavior
opacity-{n}	Opacity: 0, 5, 10, 15, 20, 25, ..., 95, 100
scale-{n}	Transform scale: 0, 50, 75, 90, 95, 100, 105, 110, 125, 150
rotate-{n}	Rotation: 0, 1, 2, 3, 6, 12, 45, 90, 180 (deg)
translate-x-{n} / translate-y-{n}	Translate on axis (spacing scale)
skew-x-{n} / skew-y-{n}	Skew: 0, 1, 2, 3, 6, 12 (deg)
origin-center / top / bottom / left / right / ...	transform-origin
cursor-pointer / default / wait / text / move / not-allowed / ...	cursor style
select-none / text / all / auto	user-select
pointer-events-none / auto	pointer-events
resize / resize-none / resize-x / resize-y	Resize behavior
scroll-smooth	scroll-behavior: smooth
snap-start / center / end / align-none	Scroll snap alignment
snap-x / snap-y / snap-both	Scroll snap type axis
snap-mandatory / snap-proximity	Scroll snap strictness
aspect-auto / square / video	aspect-ratio: auto / 1/1 / 16/9
object-contain / cover / fill / none / scale-down	object-fit
object-center / top / bottom / left / right / ...	object-position
float-left / right / none / start / end	float
clear-left / right / both / none	clear
isolation-auto / isolate	isolation
mix-blend-normal / multiply / screen / overlay / ...	mix-blend-mode
bg-blend-normal / multiply / screen / overlay / ...	background-blend-mode

Arbitrary Values

When the built-in scale does not have what you need, use square-bracket notation to supply any CSS value:

w-[200px]
mt-[clamp(1rem,5vw,3rem)]
grid-cols-[200px_1fr_200px]
bg-[url('/hero.jpg')]
text-[color:var(--my-color)]

Related Resources

All Cheatsheets CSS Selectors HTML Entities Developer Tools Go Premium