顏色與字體
Tailwind 內建一組有階級的色盤（50 最淺、950 最深）與字級尺度。先用內建值排出對比清楚的畫面，品牌色再進 主題客製。
顏色怎麼寫
模式是 {屬性}-{色名}-{階級}：
<button class="bg-sky-600 text-white hover:bg-sky-500">
送出
</button>
<p class="text-slate-600">說明文字</p>
<div class="border border-slate-200 bg-white">卡片</div>
| 前綴 | 對應 |
|---|---|
text-sky-600 |
字色 |
bg-sky-600 |
背景 |
border-slate-200 |
框線色 |
ring-sky-500 |
focus ring 色 |
text-white / bg-black |
無階級的極端色 |
內文與標題不要都用純黑。text-slate-900 配 text-slate-600 的層次，比到處 text-black 耐看。對比不夠時（淺字配淺底）會傷害可讀性，也過不了無障礙檢查。
色名可在文件 Colors 查。v4 預設走較廣色域的表示，但 class 名稱仍是 sky-600 這種寫法。
字級、字重、行高
<h1 class="text-3xl font-bold tracking-tight">標題</h1>
<p class="text-base leading-7 text-slate-600">段落</p>
| class | 意思 |
|---|---|
text-sm / text-base / text-xl / text-3xl |
字級（對應 font-size，多數也帶合適 line-height） |
font-medium / font-semibold / font-bold |
字重 |
leading-6 / leading-relaxed |
行高 |
tracking-tight |
字距（大標題常略縮） |
text-center / text-left |
對齊 |
italic / underline |
樣式 |
長文段落用 max-w-prose 限制行長，眼睛比較不累。h1 本身沒有瀏覽器預設的「比較大」，大小完全靠 text-*，這是 Preflight（重置樣式）的結果，不是壞掉。