I wrote this cheat sheet because I find myself constantly referencing the Tailwind docs to look up a particular class (I’m starting out and I don’t have muscle memory yet for it)

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
    • Direction
    • Wrapping
    • Align items
    • Align content
    • Align self
    • Justify content
    • Flex, grow, shrink
• Modifiers
  • Hover

Margin and Padding

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

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
1	0.25rem
2	0.5rem
3	0.75rem
4	1rem
5	1.25rem
6	1.5rem
8	2rem
10	2.5rem
12	3rem
16	4rem
20	5rem
24	6rem
32	8rem
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-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

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-full	max-width: 100%

Min width

Class	CSS
min-w-0	min-width: 0
min-w-full	min-width: 100%

Font Family

Class	CSS
font-sans	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-serif	font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-mono	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

Font Size

Class	CSS
text-xs	font-size: .75rem
text-sm	font-size: .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 provides these color names:

• slate, gray, zinc, neutral, stone
• red, orange, amber, yellow, lime, green, emerald
• teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

Each color has various levels you can use:

• 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Example:

• fuchsia-50
• fuchsia-500
• fuchsia-950

We also have transparent, black and white, which do not have levels.

Text color

To apply a color to text, prepend text- to any color (example: text-red-500).

Background color

To apply a background color, prepend bg- to any color (example: bg-green-600).

Center text

Use text-center to center text.

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

You can also use numbers, from .leading-3 to .leading-10

Lessons in this unit:

0:	Introduction
1:	Box model properties
2:	Colors
3:	Typography
4:	Flexbox and Grid in Tailwind
5:	Modifiers
6:	Responsive design in Tailwind
7:	Apply a style to children with Tailwind
8:	How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code
9:	How to align center vertically using Tailwind
10:	How to use custom fonts with Tailwind CSS
11:	Setting up Tailwind CSS on Vite
12:	Show-hide an element based on existence of a parent class in Tailwind
13:	▶︎ The Tailwind Cheat Sheet
14:	How to set up Tailwind CSS (v4)
15:	You can’t generate classes dynamically in Tailwind