Interactive Tailwind Cheat Sheet
Search and filter a curated common utility reference with CSS mappings and copyable output.
tailwind-cheat-sheetLOCAL WORKSPACE
Enabling local controls…
Tailwind v4 workbench
Preview uses native CSS, not a Tailwind runtime. Every change updates the result locally. Text and settings stay in page memory.
Limits: 16,000 UTF-8 bytes per text area, 1,000 classes, 24 layout items, 8 cards/shadow layers, 20 × 12 table cells. No input HTML, scripts, URLs or commands execute.
Converters use common documented rules. Arbitrary values and modifier characters are preserved, but unknown tokens are marked unsupported. Real cascade, custom themes and plugins require a Tailwind build.
References checked: · Theme · Responsive design · v4 upgrade guide · Colors
Preview & output
Result updated locally. Review before using in your project.
Review notes
- 304 matches in a curated common reference. Not every generated v4 utility is included.
Mappings / reference (304)
| Class | CSS | Category | Copy |
|---|---|---|---|
block | display: block | layout | |
inline | display: inline | layout | |
inline-block | display: inline-block | layout | |
flex | display: flex | layout | |
inline-flex | display: inline-flex | layout | |
grid | display: grid | layout | |
inline-grid | display: inline-grid | layout | |
contents | display: contents | layout | |
hidden | display: none | layout | |
static | position: static | layout | |
fixed | position: fixed | layout | |
absolute | position: absolute | layout | |
relative | position: relative | layout | |
sticky | position: sticky | layout | |
flex-row | flex-direction: row | flex-grid | |
flex-col | flex-direction: column | flex-grid | |
flex-row-reverse | flex-direction: row-reverse | flex-grid | |
flex-col-reverse | flex-direction: column-reverse | flex-grid | |
flex-nowrap | flex-wrap: nowrap | flex-grid | |
flex-wrap | flex-wrap: wrap | flex-grid | |
flex-wrap-reverse | flex-wrap: wrap-reverse | flex-grid | |
justify-start | justify-content: flex-start | flex-grid | |
justify-end | justify-content: flex-end | flex-grid | |
justify-center | justify-content: center | flex-grid | |
justify-between | justify-content: space-between | flex-grid | |
justify-around | justify-content: space-around | flex-grid | |
justify-evenly | justify-content: space-evenly | flex-grid | |
items-start | align-items: flex-start | flex-grid | |
items-end | align-items: flex-end | flex-grid | |
items-center | align-items: center | flex-grid | |
items-stretch | align-items: stretch | flex-grid | |
items-baseline | align-items: baseline | flex-grid | |
font-thin | font-weight: 100 | typography | |
font-light | font-weight: 300 | typography | |
font-normal | font-weight: 400 | typography | |
font-medium | font-weight: 500 | typography | |
font-semibold | font-weight: 600 | typography | |
font-bold | font-weight: 700 | typography | |
font-black | font-weight: 900 | typography | |
text-left | text-align: left | flex-grid | |
text-center | text-align: center | flex-grid | |
text-right | text-align: right | flex-grid | |
text-justify | text-align: justify | flex-grid | |
text-start | text-align: start | flex-grid | |
text-end | text-align: end | flex-grid | |
overflow-auto | overflow: auto | layout | |
overflow-hidden | overflow: hidden | layout | |
overflow-visible | overflow: visible | layout | |
overflow-scroll | overflow: scroll | layout | |
overflow-clip | overflow: clip | layout | |
w-full | width: 100% | sizing | |
h-full | height: 100% | sizing | |
w-screen | width: 100vw | sizing | |
h-screen | height: 100vh | sizing | |
min-h-screen | min-height: 100vh | sizing | |
w-auto | width: auto | sizing | |
h-auto | height: auto | sizing | |
mx-auto | margin-left: auto; margin-right: auto | layout | |
flex-1 | flex: 1 | flex-grid | |
shrink-0 | flex-shrink: 0 | flex-grid | |
grow | flex-grow: 1 | flex-grid | |
border | border-width: 1px; border-style: solid | sizing | |
border-0 | border-width: 0px | sizing | |
border-2 | border-width: 2px; border-style: solid | sizing | |
rounded-none | border-radius: 0px | borders | |
rounded-xs | border-radius: 0.125rem | borders | |
rounded-sm | border-radius: 0.25rem | borders | |
rounded-md | border-radius: 0.375rem | borders | |
rounded-lg | border-radius: 0.5rem | borders | |
rounded-xl | border-radius: 0.75rem | borders | |
rounded-2xl | border-radius: 1rem | borders | |
rounded-full | border-radius: 9999px | borders | |
shadow-none | box-shadow: none | effects | |
cursor-pointer | cursor: pointer | effects | |
select-none | user-select: none | effects | |
underline | text-decoration-line: underline | effects | |
italic | font-style: italic | typography | |
not-italic | font-style: normal | typography | |
box-border | box-sizing: border-box | effects | |
@container | container-type: inline-size | layout | |
text-xs | font-size: 0.75rem; line-height: 1rem | typography | |
text-sm | font-size: 0.875rem; line-height: 1.25rem | typography | |
text-base | font-size: 1rem; line-height: 1.5rem | typography | |
text-lg | font-size: 1.125rem; line-height: 1.75rem | typography | |
text-xl | font-size: 1.25rem; line-height: 1.75rem | typography | |
text-2xl | font-size: 1.5rem; line-height: 2rem | typography | |
text-3xl | font-size: 1.875rem; line-height: 2.25rem | typography | |
text-4xl | font-size: 2.25rem; line-height: 2.5rem | typography | |
bg-red-500 | background-color: oklch(63.7% 0.237 25.331) | colors | |
text-red-500 | color: oklch(63.7% 0.237 25.331) | colors | |
border-red-500 | border-color: oklch(63.7% 0.237 25.331) | colors | |
bg-orange-500 | background-color: oklch(70.5% 0.213 47.604) | colors | |
text-orange-500 | color: oklch(70.5% 0.213 47.604) | colors | |
border-orange-500 | border-color: oklch(70.5% 0.213 47.604) | colors | |
bg-amber-500 | background-color: oklch(76.9% 0.188 70.08) | colors | |
text-amber-500 | color: oklch(76.9% 0.188 70.08) | colors | |
border-amber-500 | border-color: oklch(76.9% 0.188 70.08) | colors | |
bg-yellow-500 | background-color: oklch(79.5% 0.184 86.047) | colors | |
text-yellow-500 | color: oklch(79.5% 0.184 86.047) | colors | |
border-yellow-500 | border-color: oklch(79.5% 0.184 86.047) | colors | |
bg-lime-500 | background-color: oklch(76.8% 0.233 130.85) | colors | |
text-lime-500 | color: oklch(76.8% 0.233 130.85) | colors | |
border-lime-500 | border-color: oklch(76.8% 0.233 130.85) | colors | |
bg-green-500 | background-color: oklch(72.3% 0.219 149.579) | colors | |
text-green-500 | color: oklch(72.3% 0.219 149.579) | colors | |
border-green-500 | border-color: oklch(72.3% 0.219 149.579) | colors | |
bg-emerald-500 | background-color: oklch(69.6% 0.17 162.48) | colors | |
text-emerald-500 | color: oklch(69.6% 0.17 162.48) | colors | |
border-emerald-500 | border-color: oklch(69.6% 0.17 162.48) | colors | |
bg-teal-500 | background-color: oklch(70.4% 0.14 182.503) | colors | |
text-teal-500 | color: oklch(70.4% 0.14 182.503) | colors | |
border-teal-500 | border-color: oklch(70.4% 0.14 182.503) | colors | |
bg-cyan-500 | background-color: oklch(71.5% 0.143 215.221) | colors | |
text-cyan-500 | color: oklch(71.5% 0.143 215.221) | colors | |
border-cyan-500 | border-color: oklch(71.5% 0.143 215.221) | colors | |
bg-sky-500 | background-color: oklch(68.5% 0.169 237.323) | colors | |
text-sky-500 | color: oklch(68.5% 0.169 237.323) | colors | |
border-sky-500 | border-color: oklch(68.5% 0.169 237.323) | colors | |
bg-blue-50 | background-color: oklch(97% 0.014 254.604) | colors | |
text-blue-50 | color: oklch(97% 0.014 254.604) | colors | |
border-blue-50 | border-color: oklch(97% 0.014 254.604) | colors | |
bg-blue-100 | background-color: oklch(93.2% 0.032 255.585) | colors | |
text-blue-100 | color: oklch(93.2% 0.032 255.585) | colors | |
border-blue-100 | border-color: oklch(93.2% 0.032 255.585) | colors | |
bg-blue-500 | background-color: oklch(62.3% 0.214 259.815) | colors | |
text-blue-500 | color: oklch(62.3% 0.214 259.815) | colors | |
border-blue-500 | border-color: oklch(62.3% 0.214 259.815) | colors | |
bg-blue-600 | background-color: oklch(54.6% 0.245 262.881) | colors | |
text-blue-600 | color: oklch(54.6% 0.245 262.881) | colors | |
border-blue-600 | border-color: oklch(54.6% 0.245 262.881) | colors | |
bg-blue-700 | background-color: oklch(48.8% 0.243 264.376) | colors | |
text-blue-700 | color: oklch(48.8% 0.243 264.376) | colors | |
border-blue-700 | border-color: oklch(48.8% 0.243 264.376) | colors | |
bg-blue-900 | background-color: oklch(37.9% 0.146 265.522) | colors | |
text-blue-900 | color: oklch(37.9% 0.146 265.522) | colors | |
border-blue-900 | border-color: oklch(37.9% 0.146 265.522) | colors | |
bg-indigo-500 | background-color: oklch(58.5% 0.233 277.117) | colors | |
text-indigo-500 | color: oklch(58.5% 0.233 277.117) | colors | |
border-indigo-500 | border-color: oklch(58.5% 0.233 277.117) | colors | |
bg-violet-500 | background-color: oklch(60.6% 0.25 292.717) | colors | |
text-violet-500 | color: oklch(60.6% 0.25 292.717) | colors | |
border-violet-500 | border-color: oklch(60.6% 0.25 292.717) | colors | |
bg-purple-500 | background-color: oklch(62.7% 0.265 303.9) | colors | |
text-purple-500 | color: oklch(62.7% 0.265 303.9) | colors | |
border-purple-500 | border-color: oklch(62.7% 0.265 303.9) | colors | |
bg-fuchsia-500 | background-color: oklch(66.7% 0.295 322.15) | colors | |
text-fuchsia-500 | color: oklch(66.7% 0.295 322.15) | colors | |
border-fuchsia-500 | border-color: oklch(66.7% 0.295 322.15) | colors | |
bg-pink-500 | background-color: oklch(65.6% 0.241 354.308) | colors | |
text-pink-500 | color: oklch(65.6% 0.241 354.308) | colors | |
border-pink-500 | border-color: oklch(65.6% 0.241 354.308) | colors | |
bg-rose-500 | background-color: oklch(64.5% 0.246 16.439) | colors | |
text-rose-500 | color: oklch(64.5% 0.246 16.439) | colors | |
border-rose-500 | border-color: oklch(64.5% 0.246 16.439) | colors | |
bg-slate-50 | background-color: oklch(98.4% 0.003 247.858) | colors | |
text-slate-50 | color: oklch(98.4% 0.003 247.858) | colors | |
border-slate-50 | border-color: oklch(98.4% 0.003 247.858) | colors | |
bg-slate-100 | background-color: oklch(96.8% 0.007 247.896) | colors | |
text-slate-100 | color: oklch(96.8% 0.007 247.896) | colors | |
border-slate-100 | border-color: oklch(96.8% 0.007 247.896) | colors | |
bg-slate-200 | background-color: oklch(92.9% 0.013 255.508) | colors | |
text-slate-200 | color: oklch(92.9% 0.013 255.508) | colors | |
border-slate-200 | border-color: oklch(92.9% 0.013 255.508) | colors | |
bg-slate-300 | background-color: oklch(86.9% 0.022 252.894) | colors | |
text-slate-300 | color: oklch(86.9% 0.022 252.894) | colors | |
border-slate-300 | border-color: oklch(86.9% 0.022 252.894) | colors | |
bg-slate-400 | background-color: oklch(70.4% 0.04 256.788) | colors | |
text-slate-400 | color: oklch(70.4% 0.04 256.788) | colors | |
border-slate-400 | border-color: oklch(70.4% 0.04 256.788) | colors | |
bg-slate-500 | background-color: oklch(55.4% 0.046 257.417) | colors | |
text-slate-500 | color: oklch(55.4% 0.046 257.417) | colors | |
border-slate-500 | border-color: oklch(55.4% 0.046 257.417) | colors | |
bg-slate-600 | background-color: oklch(44.6% 0.043 257.281) | colors | |
text-slate-600 | color: oklch(44.6% 0.043 257.281) | colors | |
border-slate-600 | border-color: oklch(44.6% 0.043 257.281) | colors | |
bg-slate-700 | background-color: oklch(37.2% 0.044 257.287) | colors | |
text-slate-700 | color: oklch(37.2% 0.044 257.287) | colors | |
border-slate-700 | border-color: oklch(37.2% 0.044 257.287) | colors | |
bg-slate-800 | background-color: oklch(27.9% 0.041 260.031) | colors | |
text-slate-800 | color: oklch(27.9% 0.041 260.031) | colors | |
border-slate-800 | border-color: oklch(27.9% 0.041 260.031) | colors | |
bg-slate-900 | background-color: oklch(20.8% 0.042 265.755) | colors | |
text-slate-900 | color: oklch(20.8% 0.042 265.755) | colors | |
border-slate-900 | border-color: oklch(20.8% 0.042 265.755) | colors | |
bg-slate-950 | background-color: oklch(12.9% 0.042 264.695) | colors | |
text-slate-950 | color: oklch(12.9% 0.042 264.695) | colors | |
border-slate-950 | border-color: oklch(12.9% 0.042 264.695) | colors | |
bg-gray-500 | background-color: oklch(55.1% 0.027 264.364) | colors | |
text-gray-500 | color: oklch(55.1% 0.027 264.364) | colors | |
border-gray-500 | border-color: oklch(55.1% 0.027 264.364) | colors | |
bg-zinc-500 | background-color: oklch(55.2% 0.016 285.938) | colors | |
text-zinc-500 | color: oklch(55.2% 0.016 285.938) | colors | |
border-zinc-500 | border-color: oklch(55.2% 0.016 285.938) | colors | |
bg-neutral-500 | background-color: oklch(55.6% 0 0) | colors | |
text-neutral-500 | color: oklch(55.6% 0 0) | colors | |
border-neutral-500 | border-color: oklch(55.6% 0 0) | colors | |
bg-stone-500 | background-color: oklch(55.3% 0.013 58.071) | colors | |
text-stone-500 | color: oklch(55.3% 0.013 58.071) | colors | |
border-stone-500 | border-color: oklch(55.3% 0.013 58.071) | colors | |
bg-mauve-500 | background-color: oklch(54.2% 0.034 322.5) | colors | |
text-mauve-500 | color: oklch(54.2% 0.034 322.5) | colors | |
border-mauve-500 | border-color: oklch(54.2% 0.034 322.5) | colors | |
bg-olive-500 | background-color: oklch(58% 0.031 107.3) | colors | |
text-olive-500 | color: oklch(58% 0.031 107.3) | colors | |
border-olive-500 | border-color: oklch(58% 0.031 107.3) | colors | |
bg-mist-500 | background-color: oklch(56% 0.021 213.5) | colors | |
text-mist-500 | color: oklch(56% 0.021 213.5) | colors | |
border-mist-500 | border-color: oklch(56% 0.021 213.5) | colors | |
bg-taupe-500 | background-color: oklch(54.7% 0.021 43.1) | colors | |
text-taupe-500 | color: oklch(54.7% 0.021 43.1) | colors | |
border-taupe-500 | border-color: oklch(54.7% 0.021 43.1) | colors | |
bg-white | background-color: #fff | colors | |
text-white | color: #fff | colors | |
border-white | border-color: #fff | colors | |
bg-black | background-color: #000 | colors | |
text-black | color: #000 | colors | |
border-black | border-color: #000 | colors | |
p-0 | padding: 0rem | spacing | |
p-1 | padding: 0.25rem | spacing | |
p-2 | padding: 0.5rem | spacing | |
p-4 | padding: 1rem | spacing | |
p-6 | padding: 1.5rem | spacing | |
p-8 | padding: 2rem | spacing | |
p-12 | padding: 3rem | spacing | |
p-16 | padding: 4rem | spacing | |
p-24 | padding: 6rem | spacing | |
px-0 | padding-left: 0rem; padding-right: 0rem | layout | |
px-1 | padding-left: 0.25rem; padding-right: 0.25rem | layout | |
px-2 | padding-left: 0.5rem; padding-right: 0.5rem | layout | |
px-4 | padding-left: 1rem; padding-right: 1rem | layout | |
px-6 | padding-left: 1.5rem; padding-right: 1.5rem | layout | |
px-8 | padding-left: 2rem; padding-right: 2rem | layout | |
px-12 | padding-left: 3rem; padding-right: 3rem | layout | |
px-16 | padding-left: 4rem; padding-right: 4rem | layout | |
px-24 | padding-left: 6rem; padding-right: 6rem | layout | |
py-0 | padding-top: 0rem; padding-bottom: 0rem | layout | |
py-1 | padding-top: 0.25rem; padding-bottom: 0.25rem | layout | |
py-2 | padding-top: 0.5rem; padding-bottom: 0.5rem | layout | |
py-4 | padding-top: 1rem; padding-bottom: 1rem | layout | |
py-6 | padding-top: 1.5rem; padding-bottom: 1.5rem | layout | |
py-8 | padding-top: 2rem; padding-bottom: 2rem | layout | |
py-12 | padding-top: 3rem; padding-bottom: 3rem | layout | |
py-16 | padding-top: 4rem; padding-bottom: 4rem | layout | |
py-24 | padding-top: 6rem; padding-bottom: 6rem | layout | |
m-0 | margin: 0rem | spacing | |
m-1 | margin: 0.25rem | spacing | |
m-2 | margin: 0.5rem | spacing | |
m-4 | margin: 1rem | spacing | |
m-6 | margin: 1.5rem | spacing | |
m-8 | margin: 2rem | spacing | |
m-12 | margin: 3rem | spacing | |
m-16 | margin: 4rem | spacing | |
m-24 | margin: 6rem | spacing | |
mx-0 | margin-left: 0rem; margin-right: 0rem | layout | |
mx-1 | margin-left: 0.25rem; margin-right: 0.25rem | layout | |
mx-2 | margin-left: 0.5rem; margin-right: 0.5rem | layout | |
mx-4 | margin-left: 1rem; margin-right: 1rem | layout | |
mx-6 | margin-left: 1.5rem; margin-right: 1.5rem | layout | |
mx-8 | margin-left: 2rem; margin-right: 2rem | layout | |
mx-12 | margin-left: 3rem; margin-right: 3rem | layout | |
mx-16 | margin-left: 4rem; margin-right: 4rem | layout | |
mx-24 | margin-left: 6rem; margin-right: 6rem | layout | |
my-0 | margin-top: 0rem; margin-bottom: 0rem | layout | |
my-1 | margin-top: 0.25rem; margin-bottom: 0.25rem | layout | |
my-2 | margin-top: 0.5rem; margin-bottom: 0.5rem | layout | |
my-4 | margin-top: 1rem; margin-bottom: 1rem | layout | |
my-6 | margin-top: 1.5rem; margin-bottom: 1.5rem | layout | |
my-8 | margin-top: 2rem; margin-bottom: 2rem | layout | |
my-12 | margin-top: 3rem; margin-bottom: 3rem | layout | |
my-16 | margin-top: 4rem; margin-bottom: 4rem | layout | |
my-24 | margin-top: 6rem; margin-bottom: 6rem | layout | |
gap-0 | gap: 0rem | spacing | |
gap-1 | gap: 0.25rem | spacing | |
gap-2 | gap: 0.5rem | spacing | |
gap-4 | gap: 1rem | spacing | |
gap-6 | gap: 1.5rem | spacing | |
gap-8 | gap: 2rem | spacing | |
gap-12 | gap: 3rem | spacing | |
gap-16 | gap: 4rem | spacing | |
gap-24 | gap: 6rem | spacing | |
w-0 | width: 0rem | sizing | |
w-1 | width: 0.25rem | sizing | |
w-2 | width: 0.5rem | sizing | |
w-4 | width: 1rem | sizing | |
w-6 | width: 1.5rem | sizing | |
w-8 | width: 2rem | sizing | |
w-12 | width: 3rem | sizing | |
w-16 | width: 4rem | sizing | |
w-24 | width: 6rem | sizing | |
h-0 | height: 0rem | sizing | |
h-1 | height: 0.25rem | sizing | |
h-2 | height: 0.5rem | sizing | |
h-4 | height: 1rem | sizing | |
h-6 | height: 1.5rem | sizing | |
h-8 | height: 2rem | sizing | |
h-12 | height: 3rem | sizing | |
h-16 | height: 4rem | sizing | |
h-24 | height: 6rem | sizing | |
grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)) | flex-grid | |
grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)) | flex-grid | |
grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)) | flex-grid | |
grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)) | flex-grid | |
grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)) | flex-grid | |
grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)) | flex-grid |
Classes
Preview: first 32,000 characters. Copy, download and expanded text retain all content. Select complete text if copying fails.
block inline inline-block flex inline-flex grid inline-grid contents hidden static fixed absolute relative sticky flex-row flex-col flex-row-reverse flex-col-reverse flex-nowrap flex-wrap flex-wrap-reverse justify-start justify-end justify-center justify-between justify-around justify-evenly items-start items-end items-center items-stretch items-baseline font-thin font-light font-normal font-medium font-semibold font-bold font-black text-left text-center text-right text-justify text-start text-end overflow-auto overflow-hidden overflow-visible overflow-scroll overflow-clip w-full h-full w-screen h-screen min-h-screen w-auto h-auto mx-auto flex-1 shrink-0 grow border border-0 border-2 rounded-none rounded-xs rounded-sm rounded-md rounded-lg rounded-xl rounded-2xl rounded-full shadow-none cursor-pointer select-none underline italic not-italic box-border @container text-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl bg-red-500 text-red-500 border-red-500 bg-orange-500 text-orange-500 border-orange-500 bg-amber-500 text-amber-500 border-amber-500 bg-yellow-500 text-yellow-500 border-yellow-500 bg-lime-500 text-lime-500 border-lime-500 bg-green-500 text-green-500 border-green-500 bg-emerald-500 text-emerald-500 border-emerald-500 bg-teal-500 text-teal-500 border-teal-500 bg-cyan-500 text-cyan-500 border-cyan-500 bg-sky-500 text-sky-500 border-sky-500 bg-blue-50 text-blue-50 border-blue-50 bg-blue-100 text-blue-100 border-blue-100 bg-blue-500 text-blue-500 border-blue-500 bg-blue-600 text-blue-600 border-blue-600 bg-blue-700 text-blue-700 border-blue-700 bg-blue-900 text-blue-900 border-blue-900 bg-indigo-500 text-indigo-500 border-indigo-500 bg-violet-500 text-violet-500 border-violet-500 bg-purple-500 text-purple-500 border-purple-500 bg-fuchsia-500 text-fuchsia-500 border-fuchsia-500 bg-pink-500 text-pink-500 border-pink-500 bg-rose-500 text-rose-500 border-rose-500 bg-slate-50 text-slate-50 border-slate-50 bg-slate-100 text-slate-100 border-slate-100 bg-slate-200 text-slate-200 border-slate-200 bg-slate-300 text-slate-300 border-slate-300 bg-slate-400 text-slate-400 border-slate-400 bg-slate-500 text-slate-500 border-slate-500 bg-slate-600 text-slate-600 border-slate-600 bg-slate-700 text-slate-700 border-slate-700 bg-slate-800 text-slate-800 border-slate-800 bg-slate-900 text-slate-900 border-slate-900 bg-slate-950 text-slate-950 border-slate-950 bg-gray-500 text-gray-500 border-gray-500 bg-zinc-500 text-zinc-500 border-zinc-500 bg-neutral-500 text-neutral-500 border-neutral-500 bg-stone-500 text-stone-500 border-stone-500 bg-mauve-500 text-mauve-500 border-mauve-500 bg-olive-500 text-olive-500 border-olive-500 bg-mist-500 text-mist-500 border-mist-500 bg-taupe-500 text-taupe-500 border-taupe-500 bg-white text-white border-white bg-black text-black border-black p-0 p-1 p-2 p-4 p-6 p-8 p-12 p-16 p-24 px-0 px-1 px-2 px-4 px-6 px-8 px-12 px-16 px-24 py-0 py-1 py-2 py-4 py-6 py-8 py-12 py-16 py-24 m-0 m-1 m-2 m-4 m-6 m-8 m-12 m-16 m-24 mx-0 mx-1 mx-2 mx-4 mx-6 mx-8 mx-12 mx-16 mx-24 my-0 my-1 my-2 my-4 my-6 my-8 my-12 my-16 my-24 gap-0 gap-1 gap-2 gap-4 gap-6 gap-8 gap-12 gap-16 gap-24 w-0 w-1 w-2 w-4 w-6 w-8 w-12 w-16 w-24 h-0 h-1 h-2 h-4 h-6 h-8 h-12 h-16 h-24 grid-cols-1 grid-cols-2 grid-cols-3 grid-cols-4 grid-cols-6 grid-cols-12
Expand complete selectable text
block inline inline-block flex inline-flex grid inline-grid contents hidden static fixed absolute relative sticky flex-row flex-col flex-row-reverse flex-col-reverse flex-nowrap flex-wrap flex-wrap-reverse justify-start justify-end justify-center justify-between justify-around justify-evenly items-start items-end items-center items-stretch items-baseline font-thin font-light font-normal font-medium font-semibold font-bold font-black text-left text-center text-right text-justify text-start text-end overflow-auto overflow-hidden overflow-visible overflow-scroll overflow-clip w-full h-full w-screen h-screen min-h-screen w-auto h-auto mx-auto flex-1 shrink-0 grow border border-0 border-2 rounded-none rounded-xs rounded-sm rounded-md rounded-lg rounded-xl rounded-2xl rounded-full shadow-none cursor-pointer select-none underline italic not-italic box-border @container text-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl bg-red-500 text-red-500 border-red-500 bg-orange-500 text-orange-500 border-orange-500 bg-amber-500 text-amber-500 border-amber-500 bg-yellow-500 text-yellow-500 border-yellow-500 bg-lime-500 text-lime-500 border-lime-500 bg-green-500 text-green-500 border-green-500 bg-emerald-500 text-emerald-500 border-emerald-500 bg-teal-500 text-teal-500 border-teal-500 bg-cyan-500 text-cyan-500 border-cyan-500 bg-sky-500 text-sky-500 border-sky-500 bg-blue-50 text-blue-50 border-blue-50 bg-blue-100 text-blue-100 border-blue-100 bg-blue-500 text-blue-500 border-blue-500 bg-blue-600 text-blue-600 border-blue-600 bg-blue-700 text-blue-700 border-blue-700 bg-blue-900 text-blue-900 border-blue-900 bg-indigo-500 text-indigo-500 border-indigo-500 bg-violet-500 text-violet-500 border-violet-500 bg-purple-500 text-purple-500 border-purple-500 bg-fuchsia-500 text-fuchsia-500 border-fuchsia-500 bg-pink-500 text-pink-500 border-pink-500 bg-rose-500 text-rose-500 border-rose-500 bg-slate-50 text-slate-50 border-slate-50 bg-slate-100 text-slate-100 border-slate-100 bg-slate-200 text-slate-200 border-slate-200 bg-slate-300 text-slate-300 border-slate-300 bg-slate-400 text-slate-400 border-slate-400 bg-slate-500 text-slate-500 border-slate-500 bg-slate-600 text-slate-600 border-slate-600 bg-slate-700 text-slate-700 border-slate-700 bg-slate-800 text-slate-800 border-slate-800 bg-slate-900 text-slate-900 border-slate-900 bg-slate-950 text-slate-950 border-slate-950 bg-gray-500 text-gray-500 border-gray-500 bg-zinc-500 text-zinc-500 border-zinc-500 bg-neutral-500 text-neutral-500 border-neutral-500 bg-stone-500 text-stone-500 border-stone-500 bg-mauve-500 text-mauve-500 border-mauve-500 bg-olive-500 text-olive-500 border-olive-500 bg-mist-500 text-mist-500 border-mist-500 bg-taupe-500 text-taupe-500 border-taupe-500 bg-white text-white border-white bg-black text-black border-black p-0 p-1 p-2 p-4 p-6 p-8 p-12 p-16 p-24 px-0 px-1 px-2 px-4 px-6 px-8 px-12 px-16 px-24 py-0 py-1 py-2 py-4 py-6 py-8 py-12 py-16 py-24 m-0 m-1 m-2 m-4 m-6 m-8 m-12 m-16 m-24 mx-0 mx-1 mx-2 mx-4 mx-6 mx-8 mx-12 mx-16 mx-24 my-0 my-1 my-2 my-4 my-6 my-8 my-12 my-16 my-24 gap-0 gap-1 gap-2 gap-4 gap-6 gap-8 gap-12 gap-16 gap-24 w-0 w-1 w-2 w-4 w-6 w-8 w-12 w-16 w-24 h-0 h-1 h-2 h-4 h-6 h-8 h-12 h-16 h-24 grid-cols-1 grid-cols-2 grid-cols-3 grid-cols-4 grid-cols-6 grid-cols-12
How to use this tool
Edit the labelled controls to update a native CSS preview and copy or download Tailwind v4 output. Examples and reset stay in page memory.
When not to use it
No Tailwind runtime or full compiler. Converters support a documented common subset and list unknown utilities. Class conflicts and dark colors are suggestions requiring review in your built project. Input 16,000 UTF-8 bytes, 1,000 classes; no scripts or input HTML execute.