Is this every Tailwind class?

No. The cheatsheet lists common utilities (~200) for quick reference.

Does preview use my Tailwind build?

Previews use this site's Tailwind setup; your project theme may differ slightly.

Tailwind CSS Cheatsheet

Runs in browser

Search Tailwind CSS utility classes with live previews instantly.

Search and browse common Tailwind CSS utility classes with CSS equivalents and live previews. Filter by category and copy class names instantly.

1rem =px

flexdisplay: flex;Copy

flex-colflex-direction: column;Copy

flex-rowflex-direction: row;Copy

flex-wrapflex-wrap: wrap;Copy

inline-flexdisplay: inline-flex;Copy

griddisplay: grid;Copy

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

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

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

blockdisplay: block;Copy

inline-blockdisplay: inline-block;Copy

inlinedisplay: inline;Copy

hiddendisplay: none;Copy

items-centeralign-items: center;Copy

items-startalign-items: flex-start;Copy

items-endalign-items: flex-end;Copy

items-stretchalign-items: stretch;Copy

items-baselinealign-items: baseline;Copy

justify-centerjustify-content: center;Copy

justify-betweenjustify-content: space-between;Copy

justify-startjustify-content: flex-start;Copy

justify-endjustify-content: flex-end;Copy

justify-aroundjustify-content: space-around;Copy

justify-evenlyjustify-content: space-evenly;Copy

flex-col-reverseflex-direction: column-reverse;Copy

flex-row-reverseflex-direction: row-reverse;Copy

flex-nowrapflex-wrap: nowrap;Copy

flex-wrap-reverseflex-wrap: wrap-reverse;Copy

relativeposition: relative;Copy

absoluteposition: absolute;Copy

fixedposition: fixed;Copy

stickyposition: sticky;Copy

overflow-hiddenoverflow: hidden;Copy

overflow-autooverflow: auto;Copy

overflow-scrolloverflow: scroll;Copy

overflow-visibleoverflow: visible;Copy

z-0z-index: 0;Copy

z-10z-index: 10;Copy

z-20z-index: 20;Copy

z-30z-index: 30;Copy

z-40z-index: 40;Copy

z-50z-index: 50;Copy

z-autoz-index: auto;Copy

p-0padding: 0;Copy

p-1padding: 0.25rem /4px;Copy

p-2padding: 0.50rem /8px;Copy

p-3padding: 0.75rem /12px;Copy

p-4padding: 1rem /16px;Copy

p-5padding: 1.25rem /20px;Copy

p-6padding: 1.50rem /24px;Copy

p-8padding: 2rem /32px;Copy

p-10padding: 2.50rem /40px;Copy

p-12padding: 3rem /48px;Copy

px-2padding-left: 0.50rem /8px; padding-right: 0.50rem /8px;Copy

px-4padding-left: 1rem /16px; padding-right: 1rem /16px;Copy

px-6padding-left: 1.50rem /24px; padding-right: 1.50rem /24px;Copy

px-8padding-left: 2rem /32px; padding-right: 2rem /32px;Copy

py-1padding-top: 0.25rem /4px; padding-bottom: 0.25rem /4px;Copy

py-2padding-top: 0.50rem /8px; padding-bottom: 0.50rem /8px;Copy

py-3padding-top: 0.75rem /12px; padding-bottom: 0.75rem /12px;Copy

py-4padding-top: 1rem /16px; padding-bottom: 1rem /16px;Copy

py-6padding-top: 1.50rem /24px; padding-bottom: 1.50rem /24px;Copy

pt-4padding-top: 1rem /16px;Copy

pb-4padding-bottom: 1rem /16px;Copy

pl-4padding-left: 1rem /16px;Copy

pr-4padding-right: 1rem /16px;Copy

m-0margin: 0;Copy

m-1margin: 0.25rem /4px;Copy

m-2margin: 0.50rem /8px;Copy

m-4margin: 1rem /16px;Copy

m-6margin: 1.50rem /24px;Copy

m-8margin: 2rem /32px;Copy

m-automargin: auto;Copy

mx-automargin-left: auto; margin-right: auto;Copy

mx-4margin-left: 1rem /16px; margin-right: 1rem /16px;Copy

my-4margin-top: 1rem /16px; margin-bottom: 1rem /16px;Copy

mt-2margin-top: 0.50rem /8px;Copy

mt-4margin-top: 1rem /16px;Copy

mt-8margin-top: 2rem /32px;Copy

mb-2margin-bottom: 0.50rem /8px;Copy

mb-4margin-bottom: 1rem /16px;Copy

mb-8margin-bottom: 2rem /32px;Copy

ml-automargin-left: auto;Copy

mr-automargin-right: auto;Copy

-mt-4margin-top: -1rem /16px;Copy

-mb-4margin-bottom: -1rem /16px;Copy

gap-0gap: 0;Copy

gap-1gap: 0.25rem /4px;Copy

gap-2gap: 0.50rem /8px;Copy

gap-3gap: 0.75rem /12px;Copy

gap-4gap: 1rem /16px;Copy

gap-5gap: 1.25rem /20px;Copy

gap-6gap: 1.50rem /24px;Copy

gap-8gap: 2rem /32px;Copy

gap-10gap: 2.50rem /40px;Copy

gap-12gap: 3rem /48px;Copy

gap-16gap: 4rem /64px;Copy

gap-x-4column-gap: 1rem /16px;Copy

gap-y-4row-gap: 1rem /16px;Copy

text-xsfont-size: 0.75rem /12px; line-height: 1rem /16px;Copy

text-smfont-size: 0.875rem /14px; line-height: 1.25rem /20px;Copy

text-basefont-size: 1rem /16px; line-height: 1.5rem /24px;Copy

text-lgfont-size: 1.125rem /18px; line-height: 1.75rem /28px;Copy

text-xlfont-size: 1.25rem /20px; line-height: 1.75rem /28px;Copy

text-2xlfont-size: 1.5rem /24px; line-height: 2rem /32px;Copy

text-3xlfont-size: 1.875rem /30px; line-height: 2.25rem /36px;Copy

text-4xlfont-size: 2.25rem /36px; line-height: 2.5rem /40px;Copy

text-5xlfont-size: 3rem /48px; line-height: 1;Copy

font-thinfont-weight: 100;Copy

font-extralightfont-weight: 200;Copy

font-lightfont-weight: 300;Copy

font-normalfont-weight: 400;Copy

font-mediumfont-weight: 500;Copy

font-semiboldfont-weight: 600;Copy

font-boldfont-weight: 700;Copy

font-extraboldfont-weight: 800;Copy

leading-noneline-height: 1;Copy

leading-tightline-height: 1.25;Copy

leading-snugline-height: 1.375;Copy

leading-normalline-height: 1.5;Copy

leading-relaxedline-height: 1.625;Copy

leading-looseline-height: 2;Copy

tracking-tighterletter-spacing: -0.05em;Copy

tracking-tightletter-spacing: -0.025em;Copy

tracking-normalletter-spacing: 0em;Copy

tracking-wideletter-spacing: 0.025em;Copy

tracking-widerletter-spacing: 0.05em;Copy

text-lefttext-align: left;Copy

text-centertext-align: center;Copy

text-righttext-align: right;Copy

text-justifytext-align: justify;Copy

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

text-ellipsistext-overflow: ellipsis;Copy

line-clamp-1overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1;Copy

line-clamp-2overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;Copy

line-clamp-3overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3;Copy

uppercasetext-transform: uppercase;Copy

lowercasetext-transform: lowercase;Copy

capitalizetext-transform: capitalize;Copy

normal-casetext-transform: none;Copy

underlinetext-decoration-line: underline;Copy

line-throughtext-decoration-line: line-through;Copy

no-underlinetext-decoration-line: none;Copy

italicfont-style: italic;Copy

not-italicfont-style: normal;Copy

font-monofont-family: ui-monospace, monospace;Copy

font-sansfont-family: ui-sans-serif, system-ui, sans-serif;Copy

font-seriffont-family: ui-serif, Georgia, serif;Copy

bg-whitebackground-color: #ffffff;Copy

bg-blackbackground-color: #000000;Copy

bg-transparentbackground-color: transparent;Copy

bg-slate-50background-color: #f8fafc;Copy

bg-slate-100background-color: #f1f5f9;Copy

bg-slate-200background-color: #e2e8f0;Copy

bg-slate-300background-color: #cbd5e1;Copy

bg-slate-400background-color: #94a3b8;Copy

bg-slate-500background-color: #64748b;Copy

bg-slate-600background-color: #475569;Copy

bg-slate-700background-color: #334155;Copy

bg-slate-800background-color: #1e293b;Copy

bg-slate-900background-color: #0f172a;Copy

bg-slate-950background-color: #020617;Copy

bg-blue-500background-color: #3b82f6;Copy

bg-blue-600background-color: #2563eb;Copy

bg-blue-700background-color: #1d4ed8;Copy

bg-green-500background-color: #22c55e;Copy

bg-green-600background-color: #16a34a;Copy

bg-emerald-500background-color: #10b981;Copy

bg-red-500background-color: #ef4444;Copy

bg-red-600background-color: #dc2626;Copy

bg-yellow-400background-color: #facc15;Copy

bg-yellow-500background-color: #eab308;Copy

bg-amber-500background-color: #f59e0b;Copy

bg-purple-500background-color: #a855f7;Copy

bg-purple-600background-color: #9333ea;Copy

bg-violet-500background-color: #8b5cf6;Copy

bg-violet-600background-color: #7c3aed;Copy

bg-indigo-500background-color: #6366f1;Copy

bg-indigo-600background-color: #4f46e5;Copy

bg-pink-500background-color: #ec4899;Copy

bg-orange-500background-color: #f97316;Copy

bg-teal-500background-color: #14b8a6;Copy

text-whitecolor: #ffffff;Copy

text-blackcolor: #000000;Copy

text-slate-400color: #94a3b8;Copy

text-slate-500color: #64748b;Copy

text-slate-600color: #475569;Copy

text-slate-700color: #334155;Copy

text-slate-800color: #1e293b;Copy

text-slate-900color: #0f172a;Copy

text-blue-500color: #3b82f6;Copy

text-blue-600color: #2563eb;Copy

text-green-500color: #22c55e;Copy

text-emerald-500color: #10b981;Copy

text-red-500color: #ef4444;Copy

text-red-600color: #dc2626;Copy

text-yellow-500color: #eab308;Copy

text-amber-500color: #f59e0b;Copy

text-purple-500color: #a855f7;Copy

text-violet-500color: #8b5cf6;Copy

text-violet-600color: #7c3aed;Copy

text-indigo-500color: #6366f1;Copy

text-pink-500color: #ec4899;Copy

w-fullwidth: 100%;Copy

w-screenwidth: 100vw;Copy

w-autowidth: auto;Copy

w-fitwidth: fit-content;Copy

w-minwidth: min-content;Copy

w-maxwidth: max-content;Copy

w-1/2width: 50%;Copy

w-1/3width: 33.333333%;Copy

w-2/3width: 66.666667%;Copy

w-1/4width: 25%;Copy

w-3/4width: 75%;Copy

w-8width: 2rem /32px;Copy

w-12width: 3rem /48px;Copy

w-16width: 4rem /64px;Copy

w-24width: 6rem /96px;Copy

w-32width: 8rem /128px;Copy

w-48width: 12rem /192px;Copy

w-64width: 16rem /256px;Copy

max-w-xsmax-width: 20rem /320px;Copy

max-w-smmax-width: 24rem /384px;Copy

max-w-mdmax-width: 28rem /448px;Copy

max-w-lgmax-width: 32rem /512px;Copy

max-w-xlmax-width: 36rem /576px;Copy

max-w-2xlmax-width: 42rem /672px;Copy

max-w-3xlmax-width: 48rem /768px;Copy

max-w-4xlmax-width: 56rem /896px;Copy

max-w-5xlmax-width: 64rem /1024px;Copy

max-w-6xlmax-width: 72rem /1152px;Copy

max-w-fullmax-width: 100%;Copy

min-w-0min-width: 0;Copy

min-w-fullmin-width: 100%;Copy

h-fullheight: 100%;Copy

h-screenheight: 100vh;Copy

h-autoheight: auto;Copy

h-fitheight: fit-content;Copy

h-4height: 1rem /16px;Copy

h-6height: 1.50rem /24px;Copy

h-8height: 2rem /32px;Copy

h-10height: 2.50rem /40px;Copy

h-12height: 3rem /48px;Copy

h-16height: 4rem /64px;Copy

h-24height: 6rem /96px;Copy

h-32height: 8rem /128px;Copy

h-64height: 16rem /256px;Copy

min-h-screenmin-height: 100vh;Copy

min-h-0min-height: 0;Copy

min-h-fullmin-height: 100%;Copy

max-h-screenmax-height: 100vh;Copy

max-h-fullmax-height: 100%;Copy

borderborder-width: 1px;Copy

border-0border-width: 0;Copy

border-2border-width: 2px;Copy

border-4border-width: 4px;Copy

border-slate-200border-color: #e2e8f0;Copy

border-slate-300border-color: #cbd5e1;Copy

border-slate-600border-color: #475569;Copy

border-slate-700border-color: #334155;Copy

border-blue-500border-color: #3b82f6;Copy

border-red-500border-color: #ef4444;Copy

rounded-noneborder-radius: 0;Copy

rounded-smborder-radius: 0.125rem /2px;Copy

roundedborder-radius: 0.25rem /4px;Copy

rounded-mdborder-radius: 0.375rem /6px;Copy

rounded-lgborder-radius: 0.5rem /8px;Copy

rounded-xlborder-radius: 0.75rem /12px;Copy

rounded-2xlborder-radius: 1rem /16px;Copy

rounded-3xlborder-radius: 1.5rem /24px;Copy

rounded-fullborder-radius: 9999px;Copy

border-solidborder-style: solid;Copy

border-dashedborder-style: dashed;Copy

border-dottedborder-style: dotted;Copy

divide-xborder-right-width: 1px;Copy

divide-yborder-bottom-width: 1px;Copy

divide-slate-200border-color: #e2e8f0;Copy

outline-noneoutline: 2px solid transparent; outline-offset: 2px;Copy

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

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

ring-4box-shadow: 0 0 0 4px rgb(0 0 0 / 0.05);Copy

ring-slate-300box-shadow: 0 0 0 1px #cbd5e1;Copy

ring-blue-500box-shadow: 0 0 0 1px #3b82f6;Copy

ring-offset-2outline-offset: 2px;Copy

ring-offset-4outline-offset: 4px;Copy

shadow-nonebox-shadow: none;Copy

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

shadowbox-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);Copy

shadow-mdbox-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);Copy

shadow-lgbox-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);Copy

shadow-xlbox-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);Copy

shadow-2xlbox-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);Copy

shadow-innerbox-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);Copy

opacity-0opacity: 0;Copy

opacity-25opacity: 0.25;Copy

opacity-50opacity: 0.5;Copy

opacity-75opacity: 0.75;Copy

opacity-90opacity: 0.9;Copy

opacity-100opacity: 1;Copy

blur-nonefilter: blur(0);Copy

blur-smfilter: blur(4px);Copy

blurfilter: blur(8px);Copy

blur-mdfilter: blur(12px);Copy

blur-lgfilter: blur(16px);Copy

backdrop-blur-nonebackdrop-filter: blur(0);Copy

backdrop-blur-smbackdrop-filter: blur(4px);Copy

backdrop-blurbackdrop-filter: blur(8px);Copy

backdrop-blur-mdbackdrop-filter: blur(12px);Copy

transitiontransition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;Copy

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

transition-colorstransition-property: color, background-color, border-color, text-decoration-color, fill, stroke;Copy

transition-opacitytransition-property: opacity;Copy

transition-transformtransition-property: transform;Copy

duration-75transition-duration: 75ms;Copy

duration-100transition-duration: 100ms;Copy

duration-150transition-duration: 150ms;Copy

duration-200transition-duration: 200ms;Copy

duration-300transition-duration: 300ms;Copy

duration-500transition-duration: 500ms;Copy

duration-700transition-duration: 700ms;Copy

ease-lineartransition-timing-function: linear;Copy

ease-intransition-timing-function: cubic-bezier(0.4, 0, 1, 1);Copy

ease-outtransition-timing-function: cubic-bezier(0, 0, 0.2, 1);Copy

ease-in-outtransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);Copy

animate-noneanimation: none;Copy

animate-spinanimation: spin 1s linear infinite;Copy

animate-pinganimation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;Copy

animate-pulseanimation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;Copy

animate-bounceanimation: bounce 1s infinite;Copy

delay-75transition-delay: 75ms;Copy

delay-100transition-delay: 100ms;Copy

delay-150transition-delay: 150ms;Copy

delay-200transition-delay: 200ms;Copy

delay-300transition-delay: 300ms;Copy

scale-0transform: scale(0);Copy

scale-50transform: scale(0.5);Copy

scale-75transform: scale(0.75);Copy

scale-90transform: scale(0.9);Copy

scale-95transform: scale(0.95);Copy

scale-100transform: scale(1);Copy

scale-105transform: scale(1.05);Copy

scale-110transform: scale(1.1);Copy

scale-125transform: scale(1.25);Copy

rotate-0transform: rotate(0deg);Copy

rotate-45transform: rotate(45deg);Copy

rotate-90transform: rotate(90deg);Copy

rotate-180transform: rotate(180deg);Copy

-rotate-45transform: rotate(-45deg);Copy

-rotate-90transform: rotate(-90deg);Copy

translate-x-0transform: translateX(0);Copy

translate-x-1transform: translateX(0.25rem /4px);Copy

translate-x-2transform: translateX(0.50rem /8px);Copy

translate-x-4transform: translateX(1rem /16px);Copy

-translate-x-1transform: translateX(-0.25rem /4px);Copy

-translate-x-2transform: translateX(-0.50rem /8px);Copy

translate-y-0transform: translateY(0);Copy

translate-y-1transform: translateY(0.25rem /4px);Copy

-translate-y-1transform: translateY(-0.25rem /4px);Copy

-translate-y-2transform: translateY(-0.50rem /8px);Copy

skew-x-3transform: skewX(3deg);Copy

skew-y-3transform: skewY(3deg);Copy

cursor-autocursor: auto;Copy

cursor-defaultcursor: default;Copy

cursor-pointercursor: pointer;Copy

cursor-waitcursor: wait;Copy

cursor-textcursor: text;Copy

cursor-not-allowedcursor: not-allowed;Copy

cursor-grabcursor: grab;Copy

cursor-crosshaircursor: crosshair;Copy

pointer-events-nonepointer-events: none;Copy

pointer-events-autopointer-events: auto;Copy

select-noneuser-select: none;Copy

select-textuser-select: text;Copy

select-alluser-select: all;Copy

select-autouser-select: auto;Copy

resize-noneresize: none;Copy

resizeresize: both;Copy

resize-xresize: horizontal;Copy

resize-yresize: vertical;Copy

appearance-noneappearance: none;Copy

appearance-autoappearance: auto;Copy

outlineoutline-style: solid;Copy

focus:outline-noneoutline: 2px solid transparent; (on :focus)Copy

focus:ring-2box-shadow: 0 0 0 2px ...; (on :focus)Copy

hover:opacity-80opacity: 0.8; (on :hover)Copy

hover:scale-105transform: scale(1.05); (on :hover)Copy

disabled:opacity-50opacity: 0.5; (on :disabled)Copy

disabled:cursor-not-allowedcursor: not-allowed; (on :disabled)Copy

sm:flex@media (min-width: 640px) { display: flex; }Copy

sm:hidden@media (min-width: 640px) { display: none; }Copy

sm:block@media (min-width: 640px) { display: block; }Copy

md:flex@media (min-width: 768px) { display: flex; }Copy

md:grid@media (min-width: 768px) { display: grid; }Copy

md:hidden@media (min-width: 768px) { display: none; }Copy

lg:flex@media (min-width: 1024px) { display: flex; }Copy

lg:grid-cols-3@media (min-width: 1024px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }Copy

xl:max-w-6xl@media (min-width: 1280px) { max-width: 72rem /1152px; }Copy

xl:grid-cols-4@media (min-width: 1280px) { grid-template-columns: repeat(4, minmax(0, 1fr)); }Copy

2xl:container@media (min-width: 1536px) { width: 100%; max-width: 1536px; margin-inline: auto; }Copy

🔒 Runs in your browser · No uploads · Your data never leaves your device

How to use

Search
Filter by text (class name or CSS snippet) and narrow with category chips.
Preview
Each card shows a compact visual when the utility applies to a box or text.
Copy
Copy a utility name to paste into your className or HTML.

Common use cases

Looking up a Tailwind spacing or typography class — Search by keyword (e.g. 'padding' or 'font-size') to find the right utility class without consulting external docs.
Browsing unfamiliar Tailwind categories — Use category filters to explore flexbox, grid, or animation utilities with live previews when learning Tailwind.

Examples

Copy-ready snippets showing common Tailwind patterns.

Card with shadow and padding

<div class="flex flex-col gap-4 p-6 bg-slate-800 rounded-xl shadow-lg border border-slate-700">
  <h2 class="text-xl font-semibold text-white">Title</h2>
  <p class="text-slate-400 text-sm">Description text</p>
</div>

Preview

Title

Description text

Primary button

<button class="px-4 py-2 bg-indigo-500 text-white font-medium rounded-lg hover:bg-indigo-600 transition-colors cursor-pointer">
  Click me
</button>

Preview

Centered flex layout

<div class="flex items-center justify-between gap-4 w-full max-w-2xl mx-auto p-4 bg-slate-100 rounded-xl">
  <span class="text-slate-600">Left</span>
  <span class="text-slate-600">Right</span>
</div>

Preview

Left Right

Frequently asked questions

Is this every Tailwind class?: No. The cheatsheet lists common utilities (~200) for quick reference.
Does preview use my Tailwind build?: Previews use this site's Tailwind setup; your project theme may differ slightly.

Key concepts

Utility class: A single-purpose CSS class in Tailwind that applies one style rule — e.g. text-lg sets font-size to 1.125rem.
Responsive prefix: A Tailwind modifier like sm: or md: that applies a utility only at a specific breakpoint — e.g. md:flex enables flex layout on medium screens.

You might find these useful too.