互動 Tailwind 速查表
搜尋及分類篩選精選常見 utilities，查看 CSS 對照並複製結果。
tailwind-cheat-sheet本機處理
正在啟用本機工具…
Tailwind v4 工作台
預覽使用原生 CSS，不載入 Tailwind runtime。修改即在本機更新結果；文字與設定僅留於頁面記憶體。
上限：每文字區 16,000 UTF-8 bytes、1,000 classes、24 個版面項目、8 張卡片／陰影層、20 × 12 表格儲存格。不執行輸入 HTML、程式、URL 或命令。
轉換器採常見且明示的規則。保留 arbitrary 值與 modifier 字元；未知 tokens 標示未支援。實際 cascade、自訂主題及外掛須用 Tailwind 建置核對。
預覽與輸出
結果已在本機更新。套用至專案前請核對。
檢查提示
- 精選常用參考中共 304 筆符合；不含所有 v4 產生式 utilities。
對照／參考 (304)
| Class | CSS | 分類 | 複製 |
|---|---|---|---|
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
預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。
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
展開可選取的完整文字
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
如何使用這個工具
調整有標籤的控制項，即時更新原生 CSS 預覽，並複製或下載 Tailwind v4 輸出。範例與重設僅存於頁面記憶體。
不適合用在什麼情況
不載入 Tailwind runtime，也不是完整編譯器。轉換器支援明示常見子集，未知 utility 會列出。衝突與暗色建議須在實際建置專案核對。輸入上限 16,000 UTF-8 bytes、1,000 classes；不執行程式或輸入 HTML。