The Tailwind Cheat Sheet

Updated Sep 17, 2026

A Tailwind CSS 4 cheat sheet mapping the CSS properties you use most, like margin, padding, width, colors, and flexbox, to their matching utility classes.

~~~

I wrote this cheat sheet because I find myself constantly referencing the Tailwind docs to remind a particular class.

This version matches Tailwind CSS 4. If you still need to wire the build, see how to set up Tailwind.

Here are the things I use the most.

Margin and Padding
- margin: 0 auto
Width
Max Width
Min width
Font Family
Font Size
Font weight
Colors
Text color
Background color
Center text
Line Height
Flexbox
- Container
- Items
Modifiers
- Hover
New in Tailwind 4

Margin and Padding

Compose those 3 tables. Add a dash before the value (e.g. pt-2, m-auto)

In Tailwind 4, spacing utilities are driven by a single --spacing scale (0.25rem per step). So p-4 is 1rem, and odd values like p-7 work without extending the config.

Symbol	Description
`p`	Padding
`m`	Margin
`-m`	Negative margin

Symbol	Description
t	Top
r	Right
b	Bottom
l	Left
x	Horizontal
y	Vertical

Value	Description
0	`0`
0.5	`0.125rem`
1	`0.25rem`
1.5	`0.375rem`
2	`0.5rem`
2.5	`0.625rem`
3	`0.75rem`
3.5	`0.875rem`
4	`1rem`
5	`1.25rem`
6	`1.5rem`
7	`1.75rem`
8	`2rem`
9	`2.25rem`
10	`2.5rem`
11	`2.75rem`
12	`3rem`
14	`3.5rem`
16	`4rem`
20	`5rem`
24	`6rem`
28	`7rem`
32	`8rem`
36	`9rem`
40	`10rem`
44	`11rem`
48	`12rem`
52	`13rem`
56	`14rem`
60	`15rem`
64	`16rem`
72	`18rem`
80	`20rem`
96	`24rem`
px	`1px`
auto	`auto`

margin: 0 auto

I sometimes use margin: 0 auto to center things.

The class mx-auto applies it.

Width

Class	CSS
w-1	`width: 0.25rem`
w-2	`width: 0.5rem`
w-3	`width: 0.75rem`
w-4	`width: 1rem`
w-6	`width: 1.5rem`
w-8	`width: 2rem`
w-10	`width: 2.5rem`
w-12	`width: 3rem`
w-16	`width: 4rem`
w-24	`width: 6rem`
w-32	`width: 8rem`
w-48	`width: 12rem`
w-64	`width: 16rem`
w-96	`width: 24rem`
w-auto	`width: auto`
w-px	`width: 1px`
w-1/2	`width: 50%`
w-1/3	`width: 33.33333%`
w-2/3	`width: 66.66667%`
w-1/4	`width: 25%`
w-3/4	`width: 75%`
w-1/5	`width: 20%`
w-2/5	`width: 40%`
w-3/5	`width: 60%`
w-4/5	`width: 80%`
w-1/6	`width: 16.66667%`
w-5/6	`width: 83.33333%`
w-full	`width: 100%`
w-screen	`width: 100vw`
w-svw	`width: 100svw`
w-dvw	`width: 100dvw`

Max Width

Class	CSS
max-w-xs	`max-width: 20rem`
max-w-sm	`max-width: 24rem`
max-w-md	`max-width: 28rem`
max-w-lg	`max-width: 32rem`
max-w-xl	`max-width: 36rem`
max-w-2xl	`max-width: 42rem`
max-w-3xl	`max-width: 48rem`
max-w-4xl	`max-width: 56rem`
max-w-5xl	`max-width: 64rem`
max-w-6xl	`max-width: 72rem`
max-w-7xl	`max-width: 80rem`
max-w-prose	`max-width: 65ch`
max-w-full	`max-width: 100%`
max-w-none	`max-width: none`

Min width

Class	CSS
min-w-0	`min-width: 0`
min-w-full	`min-width: 100%`
min-w-min	`min-width: min-content`
min-w-max	`min-width: max-content`
min-w-fit	`min-width: fit-content`

Font Family

Class	CSS
font-sans	`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, ...`
font-serif	`font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`
font-mono	`font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, ...`

Class	CSS
text-xs	`font-size: 0.75rem`
text-sm	`font-size: 0.875rem`
text-base	`font-size: 1rem`
text-lg	`font-size: 1.125rem`
text-xl	`font-size: 1.25rem`
text-2xl	`font-size: 1.5rem`
text-3xl	`font-size: 1.875rem`
text-4xl	`font-size: 2.25rem`
text-5xl	`font-size: 3rem`
text-6xl	`font-size: 3.75rem`
text-7xl	`font-size: 4.5rem`
text-8xl	`font-size: 6rem`
text-9xl	`font-size: 8rem`

Font weight

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`

Colors

Tailwind 4 ships a modern palette. Common color names:

red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
Neutrals: slate, gray, zinc, neutral, stone
Plus black, white, transparent, current

Every color has shades from -50 (lightest) up to -950 (darkest):

orange-50
orange-100
orange-200
…
orange-900
orange-950

Text color

Prepend text- to any color, for example text-blue-600

Background color

Prepend bg- to any color, for example bg-zinc-100

Center text

Use text-center

Line Height

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`

Flexbox

Container

Class	CSS
flex	`display: flex`
inline-flex	`display: inline-flex`

Items

Direction

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`

Wrapping

Class	CSS
flex-nowrap	`flex-wrap: nowrap`
flex-wrap	`flex-wrap: wrap`
flex-wrap-reverse	`flex-wrap: wrap-reverse`

Align items

Class	CSS
items-stretch	`align-items: stretch`
items-start	`align-items: flex-start`
items-center	`align-items: center`
items-end	`align-items: flex-end`
items-baseline	`align-items: baseline`

Align content

Class	CSS
content-start	`align-content: flex-start`
content-center	`align-content: center`
content-end	`align-content: flex-end`
content-between	`align-content: space-between`
content-around	`align-content: space-around`
content-evenly	`align-content: space-evenly`

Align self

Class	CSS
self-auto	`align-self: auto`
self-start	`align-self: flex-start`
self-center	`align-self: center`
self-end	`align-self: flex-end`
self-stretch	`align-self: stretch`

Justify content

Class	CSS
justify-start	`justify-content: flex-start`
justify-center	`justify-content: center`
justify-end	`justify-content: flex-end`
justify-between	`justify-content: space-between`
justify-around	`justify-content: space-around`
justify-evenly	`justify-content: space-evenly`

Flex, grow, shrink

Class	CSS
flex-initial	`flex: 0 auto`
flex-1	`flex: 1`
flex-auto	`flex: auto`
flex-none	`flex: none`
grow	`flex-grow: 1`
grow-0	`flex-grow: 0`
shrink	`flex-shrink: 1`
shrink-0	`flex-shrink: 0`

Modifiers

Hover

hover:, for example hover:bg-blue-600

New in Tailwind 4

A few utilities that did not exist in the version this cheat sheet started with:

Class	CSS
size-4	`width: 1rem; height: 1rem`
size-full	`width: 100%; height: 100%`
text-balance	`text-wrap: balance`
text-pretty	`text-wrap: pretty`
@container	`container-type: inline-size`
@sm:flex	`display: flex` when the container is at least `24rem` wide

There is no tailwind.config.js by default. You customize the theme in CSS, with an @theme block, and any value you set there becomes a utility.

Tagged: CSS · All topics

Follow @flaviocopes

Want me to talk about your product? You can sponsor this site.

~~~