Tailwind CSS Reference & Cheat Sheet

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);
Aa
text-white
color: rgb(255 255 255);
Aa
text-gray-50
color: rgb(249 250 251);
Aa
text-gray-100
color: rgb(243 244 246);
Aa
text-gray-200
color: rgb(229 231 235);
Aa
text-gray-300
color: rgb(209 213 219);
Aa
text-gray-400
color: rgb(156 163 175);
Aa
text-gray-500
color: rgb(107 114 128);
Aa
text-gray-600
color: rgb(75 85 99);
Aa
text-gray-700
color: rgb(55 65 81);
Aa
text-gray-800
color: rgb(31 41 55);
Aa
text-gray-900
color: rgb(17 24 39);
Aa
text-red-500
color: rgb(239 68 68);
Aa
text-red-600
color: rgb(220 38 38);
Aa
text-orange-500
color: rgb(249 115 22);
Aa
text-yellow-500
color: rgb(234 179 8);
Aa
text-green-500
color: rgb(34 197 94);
Aa
text-green-600
color: rgb(22 163 74);
Aa
text-blue-500
color: rgb(59 130 246);
Aa
text-blue-600
color: rgb(37 99 235);
Aa
text-indigo-500
color: rgb(99 102 241);
Aa
text-purple-500
color: rgb(168 85 247);
Aa
text-pink-500
color: rgb(236 72 153);
Aa

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

What This Tool Does

Tailwind CSS Reference & Cheat Sheet is built for deterministic developer and agent workflows.

Interactive Tailwind CSS reference with 500+ utilities. Search, browse by category, view live previews, and copy class names. Complete cheat sheet for developers.

Use How to Use for execution steps and FAQ for constraints, policies, and edge cases.

Last updated:

This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.

Agent Invocation

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.

How to Use Tailwind CSS Reference & Cheat Sheet

  1. 1

    Search by utility name

    Type in the search box to find utilities by name: 'flex', 'text-', 'bg-', 'p-'. Results show the exact class names and their CSS equivalents.

  2. 2

    Explore by category

    Browse sections like Layout (flex, grid, display), Spacing (margin, padding), Typography (font, text), Colors, and Effects. Understand which utilities work together.

  3. 3

    Compare variants

    Tailwind supports responsive variants (sm:, md:, lg:), state variants (hover:, focus:, active:), and dark mode (dark:). The reference shows all available variants for each utility.

  4. 4

    Build your class string

    Combine utilities into a single class attribute: class="flex items-center justify-between p-4 rounded-lg bg-white shadow-md hover:shadow-lg transition-shadow". Order doesn't matter; Tailwind handles specificity.

  5. 5

    Check responsive behavior

    Prefix utilities with breakpoints for responsive design: base, sm: (640px), md: (768px), lg: (1024px), xl: (1280px). Use the reference to preview how your layout adapts to different screen sizes.

Frequently Asked Questions

What is Tailwind CSS Reference?
Tailwind CSS Reference is an interactive cheat sheet with over 500 Tailwind CSS utility classes. You can search, browse by category, view live previews, and copy class names instantly.
How do I use Tailwind CSS Reference?
Search for any CSS property or Tailwind class name using the search bar, or browse by category (layout, spacing, typography, etc.). Click any utility to see a live preview and copy the class name.
Is Tailwind CSS Reference free?
Yes. This tool is free to use with immediate access—no account required.
Does Tailwind CSS Reference store or send my data?
No. All processing happens entirely in your browser. Your data never leaves your device — nothing is sent to any server.
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.