Tailwind CSS Reference & Cheat Sheet

Search and browse Tailwind CSS utility classes by category, see the CSS behind each one with a live preview, and copy class names.

Layout

container

Container with responsive max-widths

width: 100%; max-width: ...

box-border

box-sizing: border-box;

box-content

box-sizing: content-box;

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;

hidden

display: none;

float-left

float: left;

float-right

float: right;

float-none

float: none;

clear-left

clear: left;

clear-right

clear: right;

clear-both

clear: both;

clear-none

clear: none;

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;

overflow-auto

overflow: auto;

overflow-hidden

overflow: hidden;

overflow-visible

overflow: visible;

overflow-scroll

overflow: scroll;

overflow-x-auto

overflow-x: auto;

overflow-y-auto

overflow-y: auto;

static

position: static;

fixed

position: fixed;

absolute

position: absolute;

relative

position: relative;

sticky

position: sticky;

visible

visibility: visible;

invisible

visibility: hidden;

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;

Flexbox

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;

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;

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;

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;

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;

gap-0

gap: 0px;

gap-1

gap: 0.25rem;

gap-2

gap: 0.5rem;

gap-4

gap: 1rem;

gap-8

gap: 2rem;

Grid

grid-cols-1

grid-template-columns: repeat(1, minmax(0, 1fr));

grid-cols-2

grid-template-columns: repeat(2, minmax(0, 1fr));

grid-cols-3

grid-template-columns: repeat(3, minmax(0, 1fr));

grid-cols-4

grid-template-columns: repeat(4, minmax(0, 1fr));

grid-cols-6

grid-template-columns: repeat(6, minmax(0, 1fr));

grid-cols-12

grid-template-columns: repeat(12, minmax(0, 1fr));

grid-rows-1

grid-template-rows: repeat(1, minmax(0, 1fr));

grid-rows-2

grid-template-rows: repeat(2, minmax(0, 1fr));

grid-rows-3

grid-template-rows: repeat(3, minmax(0, 1fr));

col-span-1

grid-column: span 1 / span 1;

col-span-2

grid-column: span 2 / span 2;

col-span-3

grid-column: span 3 / span 3;

col-span-4

grid-column: span 4 / span 4;

col-span-full

grid-column: 1 / -1;

row-span-1

grid-row: span 1 / span 1;

row-span-2

grid-row: span 2 / span 2;

row-span-3

grid-row: span 3 / span 3;

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);

grid-flow-row

grid-auto-flow: row;

grid-flow-col

grid-auto-flow: column;

grid-flow-dense

grid-auto-flow: dense;

place-content-center

place-content: center;

place-items-center

place-items: center;

place-self-center

place-self: center;

Spacing

p-0

padding: 0px;

p-1

padding: 0.25rem;

p-2

padding: 0.5rem;

p-3

padding: 0.75rem;

p-4

padding: 1rem;

p-5

padding: 1.25rem;

p-6

padding: 1.5rem;

p-8

padding: 2rem;

p-10

padding: 2.5rem;

p-12

padding: 3rem;

px-0

padding-left: 0px; padding-right: 0px;

px-1

padding-left: 0.25rem; padding-right: 0.25rem;

px-2

padding-left: 0.5rem; padding-right: 0.5rem;

px-4

padding-left: 1rem; padding-right: 1rem;

px-6

padding-left: 1.5rem; padding-right: 1.5rem;

py-0

padding-top: 0px; padding-bottom: 0px;

py-1

padding-top: 0.25rem; padding-bottom: 0.25rem;

py-2

padding-top: 0.5rem; padding-bottom: 0.5rem;

py-4

padding-top: 1rem; padding-bottom: 1rem;

py-8

padding-top: 2rem; padding-bottom: 2rem;

pt-0

padding-top: 0px;

pt-4

padding-top: 1rem;

pr-4

padding-right: 1rem;

pb-4

padding-bottom: 1rem;

pl-4

padding-left: 1rem;

m-0

margin: 0px;

m-1

margin: 0.25rem;

m-2

margin: 0.5rem;

m-4

margin: 1rem;

m-8

margin: 2rem;

m-auto

margin: auto;

mx-0

margin-left: 0px; margin-right: 0px;

mx-1

margin-left: 0.25rem; margin-right: 0.25rem;

mx-2

margin-left: 0.5rem; margin-right: 0.5rem;

mx-4

margin-left: 1rem; margin-right: 1rem;

mx-auto

margin-left: auto; margin-right: auto;

my-0

margin-top: 0px; margin-bottom: 0px;

my-2

margin-top: 0.5rem; margin-bottom: 0.5rem;

my-4

margin-top: 1rem; margin-bottom: 1rem;

mt-0

margin-top: 0px;

mt-4

margin-top: 1rem;

mr-4

margin-right: 1rem;

mb-4

margin-bottom: 1rem;

ml-4

margin-left: 1rem;

-m-1

margin: -0.25rem;

-m-2

margin: -0.5rem;

space-x-1

Horizontal spacing between children

& > * + * { margin-left: 0.25rem; }

space-x-2

Horizontal spacing between children

& > * + * { margin-left: 0.5rem; }

space-x-4

Horizontal spacing between children

& > * + * { margin-left: 1rem; }

space-y-1

Vertical spacing between children

& > * + * { margin-top: 0.25rem; }

space-y-2

Vertical spacing between children

& > * + * { margin-top: 0.5rem; }

space-y-4

Vertical spacing between children

& > * + * { margin-top: 1rem; }

Sizing

w-0

width: 0px;

w-1

width: 0.25rem;

w-2

width: 0.5rem;

w-4

width: 1rem;

w-8

width: 2rem;

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-1/2

width: 50%;

w-1/3

width: 33.333333%;

w-2/3

width: 66.666667%;

w-1/4

width: 25%;

w-3/4

width: 75%;

w-full

width: 100%;

w-screen

width: 100vw;

w-min

width: min-content;

w-max

width: max-content;

w-fit

width: fit-content;

h-0

height: 0px;

h-1

height: 0.25rem;

h-2

height: 0.5rem;

h-4

height: 1rem;

h-8

height: 2rem;

h-12

height: 3rem;

h-16

height: 4rem;

h-24

height: 6rem;

h-32

height: 8rem;

h-48

height: 12rem;

h-64

height: 16rem;

h-auto

height: auto;

h-full

height: 100%;

h-screen

height: 100vh;

min-w-0

min-width: 0px;

min-w-full

min-width: 100%;

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-full

max-width: 100%;

min-h-0

min-height: 0px;

min-h-full

min-height: 100%;

min-h-screen

min-height: 100vh;

max-h-full

max-height: 100%;

max-h-screen

max-height: 100vh;

Typography

text-xs

font-size: 0.75rem; line-height: 1rem;

text-sm

font-size: 0.875rem; line-height: 1.25rem;

text-base

font-size: 1rem; line-height: 1.5rem;

text-lg

font-size: 1.125rem; line-height: 1.75rem;

text-xl

font-size: 1.25rem; line-height: 1.75rem;

text-2xl

font-size: 1.5rem; line-height: 2rem;

text-3xl

font-size: 1.875rem; line-height: 2.25rem;

text-4xl

font-size: 2.25rem; line-height: 2.5rem;

text-5xl

font-size: 3rem; line-height: 1;

text-6xl

font-size: 3.75rem; line-height: 1;

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;

uppercase

text-transform: uppercase;

lowercase

text-transform: lowercase;

capitalize

text-transform: capitalize;

normal-case

text-transform: none;

underline

text-decoration-line: underline;

line-through

text-decoration-line: line-through;

no-underline

text-decoration-line: none;

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;

break-normal

overflow-wrap: normal; word-break: normal;

break-words

overflow-wrap: break-word;

break-all

word-break: break-all;

truncate

overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

Colors

text-black

color: rgb(0 0 0);

text-white

color: rgb(255 255 255);

text-gray-50

color: rgb(249 250 251);

text-gray-100

color: rgb(243 244 246);

text-gray-200

color: rgb(229 231 235);

text-gray-300

color: rgb(209 213 219);

text-gray-400

color: rgb(156 163 175);

text-gray-500

color: rgb(107 114 128);

text-gray-600

color: rgb(75 85 99);

text-gray-700

color: rgb(55 65 81);

text-gray-800

color: rgb(31 41 55);

text-gray-900

color: rgb(17 24 39);

text-red-500

color: rgb(239 68 68);

text-red-600

color: rgb(220 38 38);

text-orange-500

color: rgb(249 115 22);

text-yellow-500

color: rgb(234 179 8);

text-green-500

color: rgb(34 197 94);

text-green-600

color: rgb(22 163 74);

text-blue-500

color: rgb(59 130 246);

text-blue-600

color: rgb(37 99 235);

text-indigo-500

color: rgb(99 102 241);

text-purple-500

color: rgb(168 85 247);

text-pink-500

color: rgb(236 72 153);

Backgrounds

bg-transparent

background-color: transparent;

bg-black

background-color: rgb(0 0 0);

bg-white

background-color: rgb(255 255 255);

bg-gray-50

background-color: rgb(249 250 251);

bg-gray-100

background-color: rgb(243 244 246);

bg-gray-200

background-color: rgb(229 231 235);

bg-gray-300

background-color: rgb(209 213 219);

bg-gray-400

background-color: rgb(156 163 175);

bg-gray-500

background-color: rgb(107 114 128);

bg-gray-600

background-color: rgb(75 85 99);

bg-gray-700

background-color: rgb(55 65 81);

bg-gray-800

background-color: rgb(31 41 55);

bg-gray-900

background-color: rgb(17 24 39);

bg-red-500

background-color: rgb(239 68 68);

bg-red-600

background-color: rgb(220 38 38);

bg-orange-500

background-color: rgb(249 115 22);

bg-yellow-500

background-color: rgb(234 179 8);

bg-green-500

background-color: rgb(34 197 94);

bg-green-600

background-color: rgb(22 163 74);

bg-blue-500

background-color: rgb(59 130 246);

bg-blue-600

background-color: rgb(37 99 235);

bg-indigo-500

background-color: rgb(99 102 241);

bg-purple-500

background-color: rgb(168 85 247);

bg-pink-500

background-color: rgb(236 72 153);

Borders

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

border-top-width: 1px;

border-r

border-right-width: 1px;

border-b

border-bottom-width: 1px;

border-l

border-left-width: 1px;

border-solid

border-style: solid;

border-dashed

border-style: dashed;

border-dotted

border-style: dotted;

border-none

border-style: none;

border-gray-200

border-color: rgb(229 231 235);

border-gray-300

border-color: rgb(209 213 219);

border-gray-400

border-color: rgb(156 163 175);

border-blue-500

border-color: rgb(59 130 246);

rounded-none

border-radius: 0px;

rounded-sm

border-radius: 0.125rem;

rounded

border-radius: 0.25rem;

rounded-md

border-radius: 0.375rem;

rounded-lg

border-radius: 0.5rem;

rounded-xl

border-radius: 0.75rem;

rounded-2xl

border-radius: 1rem;

rounded-3xl

border-radius: 1.5rem;

rounded-full

border-radius: 9999px;

rounded-t-lg

border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;

rounded-r-lg

border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;

rounded-b-lg

border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem;

rounded-l-lg

border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;

Effects

shadow-sm

box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

shadow

box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

shadow-md

box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

shadow-lg

box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

shadow-xl

box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

shadow-2xl

box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);

shadow-none

box-shadow: 0 0 #0000;

opacity-0

opacity: 0;

opacity-25

opacity: 0.25;

opacity-50

opacity: 0.5;

opacity-75

opacity: 0.75;

opacity-100

opacity: 1;

blur-none

filter: blur(0);

blur-sm

filter: blur(4px);

blur

filter: blur(8px);

blur-lg

filter: blur(16px);

brightness-0

filter: brightness(0);

brightness-50

filter: brightness(.5);

brightness-100

filter: brightness(1);

brightness-150

filter: brightness(1.5);

contrast-0

filter: contrast(0);

contrast-50

filter: contrast(.5);

contrast-100

filter: contrast(1);

grayscale

filter: grayscale(100%);

grayscale-0

filter: grayscale(0);

sepia

filter: sepia(100%);

sepia-0

filter: sepia(0);

Transitions

transition-none

transition-property: none;

transition-all

transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;

transition

transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

transition-colors

transition-property: color, background-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-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;

ease-linear

transition-timing-function: linear;

ease-in

transition-timing-function: cubic-bezier(0.4, 0, 1, 1);

ease-out

transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

ease-in-out

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

Transforms

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);

rotate-0

transform: rotate(0deg);

rotate-45

transform: rotate(45deg);

rotate-90

transform: rotate(90deg);

rotate-180

transform: rotate(180deg);

-rotate-45

transform: rotate(-45deg);

-rotate-90

transform: rotate(-90deg);

translate-x-0

transform: translateX(0);

translate-x-1

transform: translateX(0.25rem);

translate-x-2

transform: translateX(0.5rem);

translate-y-0

transform: translateY(0);

translate-y-1

transform: translateY(0.25rem);

translate-y-2

transform: translateY(0.5rem);

skew-x-0

transform: skewX(0deg);

skew-x-3

transform: skewX(3deg);

skew-x-6

transform: skewX(6deg);

skew-y-3

transform: skewY(3deg);

Interactivity

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-not-allowed

cursor: not-allowed;

pointer-events-none

pointer-events: none;

pointer-events-auto

pointer-events: auto;

select-none

user-select: none;

select-text

user-select: text;

select-all

user-select: all;

select-auto

user-select: auto;

resize-none

resize: none;

resize

resize: both;

resize-x

resize: horizontal;

resize-y

resize: vertical;

Spacing scale

0

0rem (0px)

1

0.25rem (4px)

2

0.5rem (8px)

3

0.75rem (12px)

4

1rem (16px)

5

1.25rem (20px)

6

1.5rem (24px)

8

2rem (32px)

10

2.5rem (40px)

12

3rem (48px)

16

4rem (64px)

20

5rem (80px)

24

6rem (96px)

Color palette

gray

red

orange

yellow

green

blue

indigo

purple

pink

Quick tips

Click any utility to copy the class name to clipboard
Hover states: Add hover: prefix (e.g., hover:bg-blue-500)
Responsive: Add breakpoint prefix (e.g., md:flex, lg:grid)
Dark mode: Add dark: prefix (e.g., dark:bg-gray-800)
Arbitrary values: Use square brackets for custom values (e.g., w-[137px])

Updated October 2, 2026. Provided as is. Check the output before you rely on it in production.

How to use Tailwind CSS Reference & Cheat Sheet

1

Search by utility name

Type in the search box to find utilities such as flex, text-center or bg-blue. Results show the class name and its CSS.
2

Explore by category

Browse categories such as Layout, Flexbox, Grid, Spacing, Typography, Colors and Effects, with a live preview for each utility.
3

Add variants

Prefix any utility with a responsive (sm:, md:, lg:), state (hover:, focus:) or dark: variant. The Quick Tips panel shows the syntax.
4

Build your class string

Click a utility to copy it, then combine utilities in a single class attribute.
5

Plan responsive behavior

Prefix utilities with breakpoints: base, sm (640px), md (768px), lg (1024px) and xl (1280px), then check the result in your own layout at each width.

Questions and answers

What is Tailwind CSS Reference?

Tailwind CSS is a utility-first framework where each class, such as flex or p-4, applies a small piece of CSS. This reference lists core utilities by category, from layout and spacing to transforms, shows the CSS behind each class with a live preview, and copies the class name on click.

Which version of Tailwind CSS does this reference cover?

The reference covers Tailwind CSS core utilities that are common across versions. It includes the most widely used classes for layout, spacing, typography, colors, flexbox, grid, and responsive design.

For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/tailwind-reference/

For automation planning, fetch the canonical contract at /api/tool/tailwind-reference.json.

Tailwind CSS Reference & Cheat Sheet