Tailwind CSS Cheatsheet

Comprehensive reference for Tailwind CSS utilities including colors, spacing, typography, flexbox, grid, responsive breakpoints, and dark mode syntax.

Quick Search

Colors Utilities

Grays

bg-gray-50

gray background color

Grays

text-gray-50

gray text color

Grays

bg-gray-100

gray background color

Grays

text-gray-100

gray text color

Grays

bg-gray-200

gray background color

Grays

text-gray-200

gray text color

Grays

bg-gray-300

gray background color

Grays

text-gray-300

gray text color

Grays

bg-gray-400

gray background color

Grays

text-gray-400

gray text color

Grays

bg-gray-500

gray background color

Grays

text-gray-500

gray text color

Grays

bg-gray-600

gray background color

Grays

text-gray-600

gray text color

Grays

bg-gray-700

gray background color

Grays

text-gray-700

gray text color

Grays

bg-gray-800

gray background color

Grays

text-gray-800

gray text color

Grays

bg-gray-900

gray background color

Grays

text-gray-900

gray text color

Grays

bg-gray-950

gray background color

Grays

text-gray-950

gray text color

Slate

bg-slate-50

slate background color

Slate

text-slate-50

slate text color

Slate

bg-slate-100

slate background color

Slate

text-slate-100

slate text color

Slate

bg-slate-200

slate background color

Slate

text-slate-200

slate text color

Slate

bg-slate-300

slate background color

Slate

text-slate-300

slate text color

Slate

bg-slate-400

slate background color

Slate

text-slate-400

slate text color

Slate

bg-slate-500

slate background color

Slate

text-slate-500

slate text color

Slate

bg-slate-600

slate background color

Slate

text-slate-600

slate text color

Slate

bg-slate-700

slate background color

Slate

text-slate-700

slate text color

Slate

bg-slate-800

slate background color

Slate

text-slate-800

slate text color

Slate

bg-slate-900

slate background color

Slate

text-slate-900

slate text color

Slate

bg-slate-950

slate background color

Slate

text-slate-950

slate text color

Zinc

bg-zinc-50

zinc background color

Zinc

text-zinc-50

zinc text color

Zinc

bg-zinc-100

zinc background color

Zinc

text-zinc-100

zinc text color

Zinc

bg-zinc-200

zinc background color

Zinc

text-zinc-200

zinc text color

Zinc

bg-zinc-300

zinc background color

Zinc

text-zinc-300

zinc text color

Zinc

bg-zinc-400

zinc background color

Zinc

text-zinc-400

zinc text color

Zinc

bg-zinc-500

zinc background color

Zinc

text-zinc-500

zinc text color

Zinc

bg-zinc-600

zinc background color

Zinc

text-zinc-600

zinc text color

Zinc

bg-zinc-700

zinc background color

Zinc

text-zinc-700

zinc text color

Zinc

bg-zinc-800

zinc background color

Zinc

text-zinc-800

zinc text color

Zinc

bg-zinc-900

zinc background color

Zinc

text-zinc-900

zinc text color

Zinc

bg-zinc-950

zinc background color

Zinc

text-zinc-950

zinc text color

Neutral

bg-neutral-50

neutral background color

Neutral

text-neutral-50

neutral text color

Neutral

bg-neutral-100

neutral background color

Neutral

text-neutral-100

neutral text color

Neutral

bg-neutral-200

neutral background color

Neutral

text-neutral-200

neutral text color

Neutral

bg-neutral-300

neutral background color

Neutral

text-neutral-300

neutral text color

Neutral

bg-neutral-400

neutral background color

Neutral

text-neutral-400

neutral text color

Neutral

bg-neutral-500

neutral background color

Neutral

text-neutral-500

neutral text color

Neutral

bg-neutral-600

neutral background color

Neutral

text-neutral-600

neutral text color

Neutral

bg-neutral-700

neutral background color

Neutral

text-neutral-700

neutral text color

Neutral

bg-neutral-800

neutral background color

Neutral

text-neutral-800

neutral text color

Neutral

bg-neutral-900

neutral background color

Neutral

text-neutral-900

neutral text color

Neutral

bg-neutral-950

neutral background color

Neutral

text-neutral-950

neutral text color

Stone

bg-stone-50

stone background color

Stone

text-stone-50

stone text color

Stone

bg-stone-100

stone background color

Stone

text-stone-100

stone text color

Stone

bg-stone-200

stone background color

Stone

text-stone-200

stone text color

Stone

bg-stone-300

stone background color

Stone

text-stone-300

stone text color

Stone

bg-stone-400

stone background color

Stone

text-stone-400

stone text color

Stone

bg-stone-500

stone background color

Stone

text-stone-500

stone text color

Stone

bg-stone-600

stone background color

Stone

text-stone-600

stone text color

Stone

bg-stone-700

stone background color

Stone

text-stone-700

stone text color

Stone

bg-stone-800

stone background color

Stone

text-stone-800

stone text color

Stone

bg-stone-900

stone background color

Stone

text-stone-900

stone text color

Stone

bg-stone-950

stone background color

Stone

text-stone-950

stone text color

Semantic

bg-red

red solid color

Semantic

text-text-red

red text color

Semantic

bg-orange

orange solid color

Semantic

text-text-orange

orange text color

Semantic

bg-amber

amber solid color

Semantic

text-text-amber

amber text color

Semantic

bg-yellow

yellow solid color

Semantic

text-text-yellow

yellow text color

Semantic

bg-lime

lime solid color

Semantic

text-text-lime

lime text color

Semantic

bg-green

green solid color

Semantic

text-text-green

green text color

Semantic

bg-emerald

emerald solid color

Semantic

text-text-emerald

emerald text color

Semantic

bg-teal

teal solid color

Semantic

text-text-teal

teal text color

Semantic

bg-cyan

cyan solid color

Semantic

text-text-cyan

cyan text color

Semantic

bg-sky

sky solid color

Semantic

text-text-sky

sky text color

Semantic

bg-blue

blue solid color

Semantic

text-text-blue

blue text color

Semantic

bg-indigo

indigo solid color

Semantic

text-text-indigo

indigo text color

Semantic

bg-violet

violet solid color

Semantic

text-text-violet

violet text color

Semantic

bg-purple

purple solid color

Semantic

text-text-purple

purple text color

Semantic

bg-fuchsia

fuchsia solid color

Semantic

text-text-fuchsia

fuchsia text color

Semantic

bg-pink

pink solid color

Semantic

text-text-pink

pink text color

Semantic

bg-rose

rose solid color

Semantic

text-text-rose

rose text color

Opacity

bg-opacity-50

Background opacity modifier

Opacity

text-opacity-50

Text opacity modifier

Spacing Utilities

Padding

p-0

All sides padding (0px or rem)

Padding

p-0.5

All sides padding (0.5px or rem)

Padding

p-1

All sides padding (1px or rem)

Padding

p-1.5

All sides padding (1.5px or rem)

Padding

p-2

All sides padding (2px or rem)

Padding

p-2.5

All sides padding (2.5px or rem)

Padding

p-3

All sides padding (3px or rem)

Padding

p-3.5

All sides padding (3.5px or rem)

Padding

p-4

All sides padding (4px or rem)

Padding

p-5

All sides padding (5px or rem)

Padding

p-6

All sides padding (6px or rem)

Padding

p-7

All sides padding (7px or rem)

Padding

p-8

All sides padding (8px or rem)

Padding

p-9

All sides padding (9px or rem)

Padding

p-10

All sides padding (10px or rem)

Padding

p-11

All sides padding (11px or rem)

Padding

p-12

All sides padding (12px or rem)

Padding

p-14

All sides padding (14px or rem)

Padding

p-16

All sides padding (16px or rem)

Padding

p-20

All sides padding (20px or rem)

Padding

p-24

All sides padding (24px or rem)

Padding

p-28

All sides padding (28px or rem)

Padding

p-32

All sides padding (32px or rem)

Padding

p-36

All sides padding (36px or rem)

Padding

p-40

All sides padding (40px or rem)

Padding

p-44

All sides padding (44px or rem)

Padding

p-48

All sides padding (48px or rem)

Padding

p-52

All sides padding (52px or rem)

Padding

p-56

All sides padding (56px or rem)

Padding

p-60

All sides padding (60px or rem)

Padding

p-64

All sides padding (64px or rem)

Padding

p-72

All sides padding (72px or rem)

Padding

p-80

All sides padding (80px or rem)

Padding

p-96

All sides padding (96px or rem)

Individual Padding

pt-2

Top padding

Individual Padding

pr-2

Right padding

Individual Padding

pb-2

Bottom padding

Individual Padding

pl-2

Left padding

Individual Padding

px-2

Horizontal padding

Individual Padding

py-2

Vertical padding

Margin

m-2

All sides margin

Margin Individual

mt-2

Top margin

Margin Individual

mr-2

Right margin

Margin Individual

mb-2

Bottom margin

Margin Individual

ml-2

Left margin

Margin Individual

mx-2

Horizontal margin

Margin Individual

my-2

Vertical margin

Gap

gap-2

Gap between grid/flex items

Flexbox Utilities

Container

flex

Inline flex container

Container

inline-flex

Block-level inline flex container

Direction

flex-row

Horizontal flex direction

Direction

flex-col

Vertical flex direction

Wrap

flex-wrap

Allow items to wrap onto multiple lines

Justify

justify-center

Center items along main axis

Justify

justify-between

Space items evenly

Align

items-center

Center items cross-axis

Align

items-start

Align items to start

Grow

grow

Grow to fill available space

Shrink

shrink

Shrink if needed

Grid Utilities

Container

grid

CSS Grid container

Columns

grid-cols-2

2-column grid

Columns

grid-cols-3

3-column grid

Columns

grid-cols-4

4-column grid

Rows

grid-rows-2

2-row grid

Auto

grid-auto-cols-minmax

Auto-fit grid columns

Gaps

gap-2

Grid gap (both axes)

Typography Utilities

Font Size

text-xs

Extra small text

Font Size

text-sm

Small text

Font Size

text-base

Base text size

Font Size

text-lg

Large text

Font Size

text-xl

Extra large text

Weight

font-bold

Bold text

Weight

font-semibold

Semibold text

Weight

font-medium

Medium weight

Alignment

text-left

Left-align text

Alignment

text-center

Center text

Alignment

text-right

Right-align text

Responsive Utilities

Breakpoints

sm:block

Block at sm+ screens (640px+)

Breakpoints

md:hidden

Hidden at md+ screens (768px+)

Breakpoints

lg:text-center

Centered at lg+ screens (1024px+)

Breakpoints

xl:w-full

Full width at xl+ screens (1280px+)

DarkMode Utilities

General

dark:bg-gray-900

Dark mode background

General

dark:text-white

Dark mode text

Contrast

dark:border-gray-700

Dark mode borders

Tailwind CSS Cheatsheet

Command Palette