TailwindCSS 排版與文字完整指南：font 字體、text 字級、leading 行高、tracking 字距、text-wrap 與 v4 text-shadow、line-clamp、truncate | TailwindCSS 完整教學

在 TailwindCSS 裡，排版（Typography）是你每天都會碰到的第一組工具類——字體、字級、行高、字距、字重、對齊、截斷，幾乎每個畫面元素都少不了。這篇是 TailwindCSS 完整教學 系列的第七篇，我們會把 font-*、text-*、leading-*、tracking-* 這些 text 工具類 一次講透，包含 v4 新增的 text-wrap 智慧換行與 text-shadow 文字陰影，並帶你用可執行的範例把設計系統的字級 Token 真正落到畫面上。

前言

排版（Typography） 在網頁設計裡指的是「文字如何被呈現」的一整套規則——用什麼字體、多大的字級、行與行之間留多少空隙、字與字之間鬆或緊、標題該多粗、文字往哪對齊、太長時怎麼截斷。在傳統 CSS 裡，這些分別由 font-family、font-size、line-height、letter-spacing、font-weight、text-align、text-overflow 等屬性掌管；而 TailwindCSS 的排版系統，就是把這些屬性一對一包裝成好記、可組合的 utility class，讓你在 HTML 裡直接拼出想要的文字樣式。

用一個現實世界的類比來理解：如果說一個網頁是一份印刷精美的雜誌，那麼排版就是排版師傅的工具箱。字體家族（font-*）是你挑選的鉛字盤——要用方正的黑體還是優雅的襯線體；字級（text-*）是鉛字的大小號數；行高（leading-*）是每行之間墊多厚的鉛條；字距（tracking-*）是字與字之間夾多少空隙；字重（font-*）決定筆畫多粗；而截斷（truncate／line-clamp）則像版面空間不夠時，師傅用省略號優雅地把文字收尾。Tailwind 把整套工具箱標準化，你不再需要每次都手寫 CSS 數值，而是像挑選現成的工具一樣組合它們。

本篇你將學到：

• 字體與字級：font-sans/serif/mono 家族、text-xs 到 text-9xl 的字級刻度，以及 v4 的 text-{size}/{leading} 行高簡寫語法
• 行高、字距、字重：leading-*、tracking-*、font-{weight} 三組微調工具，如何搭配讓文字更好讀
• 智慧換行與裝飾：v4 的 text-wrap: balance/pretty、text-align、text-decoration、text-transform，以及 v4 新增的 text-shadow-* 文字陰影
• 文字截斷：truncate 單行截斷與 line-clamp-* 多行截斷的正確用法與常見陷阱

本系列以 TailwindCSS v4 為預設版本，本篇會明確標註每一項與 v3 的差異。

核心概念

排版工具類全景：七大分類對照表

Tailwind 的排版工具數量不少，但只要按「它對應哪個 CSS 屬性」來分類，就會發現非常有條理。下面這張表把最核心的七類並列出來，先建立全景地圖：

這張表最需要先建立的認知是：text- 這個前綴身兼多職。text-lg 是字級、text-gray-900 是顏色、text-center 是對齊——它們共用前綴但語意完全不同，Tailwind 靠後綴的型別來區分。剛上手時很容易把「設字級」和「設顏色」搞混，記住這三組是獨立的工具就不會亂。

理解了這張分類表，接下來寫排版就有一套穩定的思考順序：先決定字級（這段文字該多大）、再決定字重（該多粗以表達重要性）、接著微調行高與字距（讓它更好讀）、最後處理對齊、換行與截斷（如何塞進版面）。這個從「大方向到細節」的順序，正好對應設計師排版時的直覺流程。Tailwind 的價值就在於：每一步的決策都能對應到一個清楚命名的 class，你不必在腦中換算 line-height: 1.625 是多少，只要知道「內文用 leading-relaxed」就好——設計 Token 被封裝成語意化的名字，這就是 utility-first 在排版上的最大好處。

字級與行高：一個 class 兩件事

Tailwind 的字級工具有一個貼心設計：每個 text-{size} 不只設定 font-size，還附帶一個「合理的預設 line-height」。這是因為字級越大，行高比例通常該越緊，否則大標題的行距會鬆得離譜。下面是字級刻度與其預設行高的對照：

注意 text-5xl 之後，預設行高變成 1（行高等於字級），因為超大標題通常不需要額外行距。這個「附帶行高」的設計在多數情況很方便，但你隨時可以用 leading-* 覆蓋它——例如一個 text-4xl leading-tight 就是「36px 字級，但行高改用緊縮的 1.25 而非預設的 40px」，這在多行大標題時很常見。

這裡有個容易忽略的細節值得點出：字級與行高的耦合是 Tailwind 刻意的設計，而不是限制。傳統寫 CSS 時，開發者常常只改 font-size 卻忘了同步調整 line-height，導致小字行距太擠、大字行距太鬆。Tailwind 幫你把「合理的搭配」預先綁好，讓你在 80% 的情況直接沿用預設就有不錯的結果；只有需要精細控制時才動用 leading-* 去解耦。理解這層設計意圖，你就會知道什麼時候該信任預設、什麼時候該手動覆蓋。

v4 行高簡寫語法： v4 提供一個更精簡的寫法，在字級 class 後直接用斜線附加行高，一次搞定 font-size 與 line-height。例如 text-sm/6 代表「14px 字級 + 1.5rem 行高」、text-base/7 代表「16px 字級 + 1.75rem 行高」。斜線後的數字沿用 spacing 刻度（/6 = 1.5rem），比分開寫 text-base leading-7 更緊湊。這在 v3 也可用，但 v4 讓它成為推薦寫法。

字重、字距、行高：三組微調 Token

字級決定大小，而字重、字距、行高則是讓文字「更好讀」的三組微調工具，各有自己的關鍵術語：

字重（font-weight） 從 font-thin（100）到 font-black（900），中間依序是 font-extralight（200）、font-light（300）、font-normal（400）、font-medium（500）、font-semibold（600）、font-bold（700）、font-extrabold（800）。內文用 font-normal，標題常用 font-bold 或 font-semibold。

字距（letter-spacing／tracking） 控制字元之間的鬆緊。tracking-tight（-0.025em）常用於大標題讓字更聚攏；tracking-normal 是預設；tracking-widest（0.1em）則常用於全大寫的小標籤，拉開間距增強辨識度。

行高（line-height／leading） 有兩種刻度：一種是比例關鍵字如 leading-none（1）、leading-tight（1.25）、leading-snug（1.375）、leading-normal（1.5）、leading-relaxed（1.625）、leading-loose（2），會隨字級縮放；另一種是固定值如 leading-6（1.5rem）、leading-8（2rem），沿用 spacing 刻度給固定像素。內文閱讀推薦 leading-relaxed，能明顯改善長文的可讀性；而多個並排的卡片標題若想讓文字基線對齊，用固定值 leading-6 反而比比例關鍵字更可控。

這三組工具的共通哲學是：Tailwind 把設計上「有意義的值」挑出來變成命名刻度，而不是讓你面對無窮的數字。你不會在 Tailwind 看到 font-weight-437 或 tracking-0.031em 這種奇怪的值，因為排版上真正有用的字重就是 100 到 900 的九個整百級距、真正好用的字距也就那幾檔。這種「約束反而帶來一致性」的取捨，讓一個團隊寫出來的排版天然就整齊；當然，遇到設計稿真的要求特殊值時，你仍可用任意值語法（如 tracking-[0.08em]、leading-[1.8]）逃生，但那應該是例外而非常態。

v4 的排版新工具

v4 在排版上加入了幾個實用的新成員，是這篇特別要標註的差異：

• text-wrap 智慧換行：text-balance（平衡各行長度，標題用）、text-pretty（優化孤字，段落用）、text-nowrap、text-wrap。這組在 v3.3 引入、v4 正式穩定。
• text-shadow-* 文字陰影（v4.1 新增）：提供 text-shadow-2xs／text-shadow-xs／text-shadow-sm／text-shadow-md／text-shadow-lg 遞增陰影、text-shadow-none 移除，以及 text-shadow-{color}（如 text-shadow-black/40）控制陰影顏色。最常用在淺色文字疊在圖片上時增強可讀性——這是 v3 完全沒有的能力。
• 自訂字體家族：v4 透過 CSS 的 @theme { --font-* } 定義字體，不再需要 tailwind.config.js。定義 --font-display 就能用 font-display，這是 v4「CSS-first」哲學的一環（前一篇《v4 遷移指南》已詳述這個方向）。
• text-wrap 家族拆得更細：除了 balance／pretty，v4 還把 overflow-wrap 相關行為細分出 wrap-break-word、wrap-anywhere、wrap-normal，以及 hyphens-auto（依語言規則自動加連字號斷詞，需搭配 lang 屬性）。這些是處理超長字串或多語言內容撐爆容器時的救援工具。

補充一個實用細節：text-shadow-* 和大家熟悉的 shadow-*（盒陰影，box-shadow）是兩套完全不同的工具，別搞混。shadow-md 是給元素方框加陰影，text-shadow-md 是給文字筆畫本身加陰影；一個作用在 box、一個作用在 glyph。v4.1 補上 text-shadow-* 之後，Tailwind 才算把「文字視覺效果」這塊補齊，讓你不必為了圖片上的一行白字而退回手寫 CSS。

實作範例

理論看完，我們用幾個可執行的範例把工具串起來。以下範例都是完整的 HTML + Tailwind，可直接貼進頁面觀察效果。

範例一：一篇文章的完整排版層次

最能展現排版工具威力的場景，就是排一段完整的文章開頭——類別標籤、主標題、摘要、作者資訊、正文，每一層都用不同的字級與字重拉開層次：

<!-- 文章頭部的排版層次 -->
<article class="max-w-2xl mx-auto px-4 py-8">

  <!-- 類別標籤：小字 + 全大寫 + 寬字距 -->
  <span class="text-xs font-semibold uppercase tracking-widest text-cyan-600">
    技術文章
  </span>

  <!-- 主標題：大字 + 粗體 + 緊行高 + 緊字距 + 平衡換行 -->
  <h1 class="mt-2 text-4xl lg:text-5xl font-bold text-gray-900
             leading-tight tracking-tight text-balance">
    TailwindCSS 排版系統完整指南
  </h1>

  <!-- 摘要：中大字 + 灰色 + 寬行高 + 優化孤字 -->
  <p class="mt-4 text-xl text-gray-600 leading-relaxed text-pretty">
    深入解析字體、字級、行高與字距的搭配之道，
    以及 v4 新增的 text-balance、text-pretty 智慧換行工具。
  </p>

  <!-- 正文：基礎字級 + 寬鬆行高最好讀 -->
  <div class="mt-8 space-y-6">
    <p class="text-base text-gray-700 leading-relaxed text-pretty">
      第一段內文。用 text-base 搭配 leading-relaxed 是長文閱讀的黃金組合。
    </p>
    <h2 class="text-2xl font-bold text-gray-900">子標題</h2>
    <p class="text-base text-gray-700 leading-relaxed text-pretty">
      第二段內文繼續延伸。
    </p>
  </div>
</article>

這個範例的重點在於層次感是靠工具組合堆出來的：標籤用 text-xs + uppercase + tracking-widest 顯得精緻小巧，標題用 text-4xl + font-bold + tracking-tight 顯得厚重，摘要用 text-xl + text-gray-600 顯得次要但清楚。字級、字重、顏色三者一起工作，讀者一眼就能分辨資訊的主次。

值得留意標題那行同時掛了 leading-tight 與 text-balance：前者把大字的行高收緊避免行距過鬆，後者讓標題萬一換成兩行時各行長度接近、不會出現「第一行很長、第二行只剩兩個字」的失衡畫面。而摘要與正文都掛了 text-pretty，確保段落最後一行不會只留一個孤字。這種「標題 balance、內文 pretty」的搭配，就是 v4 排版最推薦的預設習慣——寫一次，整篇文章的換行品質就自動變好。

範例二：響應式標題與字體家族

標題常常需要「手機小、桌面大」，用響應式前綴（sm:、lg:）就能一路放大。同時示範自訂字體家族：

/* 在 CSS 入口定義自訂字體（v4 的 @theme 方式）*/
@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Playfair Display', ui-serif, serif;
}

<!-- 英雄區標題：一路響應式放大，並使用自訂 display 字體 -->
<h1 class="font-display text-3xl sm:text-4xl md:text-5xl lg:text-6xl
           font-black tracking-tight leading-none text-balance text-gray-900">
  打造更好的
  <span class="text-cyan-600">數位體驗</span>
</h1>

<!-- 內文用 sans 字體 -->
<p class="font-sans text-base leading-relaxed text-gray-700">
  Inter 是一款專為螢幕閱讀優化的無襯線字體，字重齊全。
</p>

在 v4，只要在 @theme 裡定義 --font-display，就自動產生對應的 font-display utility——這是 v4 相對 v3 最大的排版差異：字體定義從 JS 設定檔搬進了 CSS。

範例三：文字截斷（單行 truncate 與多行 line-clamp）

列表、卡片、表格裡的文字常常需要「超過就截斷加省略號」。單行用 truncate，多行用 line-clamp-*：

<!-- 單行截斷：容器需有寬度限制 -->
<div class="max-w-xs">
  <p class="truncate font-medium text-gray-900">
    這是一段可能很長的標題文字，超過容器寬度時會自動顯示省略號
  </p>
</div>

<!-- 多行截斷：line-clamp-3 保留三行，其餘截斷 -->
<div class="max-w-sm">
  <p class="line-clamp-3 text-sm leading-relaxed text-gray-600">
    這是可能很長的描述文字。第二句話繼續延伸內容。第三句話也在這裡。
    超過三行的部分會被截斷並顯示省略號，第四句就不會顯示了。
  </p>
</div>

<!-- Flex 容器裡的截斷：關鍵是 min-w-0 -->
<div class="flex gap-4 max-w-md">
  <span class="flex-none font-medium text-gray-900">檔名：</span>
  <span class="flex-1 min-w-0 truncate text-gray-600">
    一個非常非常長的檔案名稱最終會被截斷.pdf
  </span>
</div>

line-clamp-3 的數字就是保留的行數，可從 line-clamp-1 到 line-clamp-6，line-clamp-none 則取消限制。特別留意最後那個 Flex 範例：flex item 預設最小寬度是內容寬度，會拒絕被壓縮，一定要加 min-w-0 才能讓 truncate 生效，這是實務上最常卡住的地方。

範例四：文字裝飾、轉換與 v4 文字陰影

最後示範裝飾（底線）、轉換（大小寫）與 v4 的文字陰影：

<!-- 文字裝飾：底線樣式、顏色、粗細、偏移都可調 -->
<a href="#" class="underline decoration-cyan-500 decoration-2
                    underline-offset-4 hover:decoration-wavy text-gray-900">
  帶波浪底線的連結
</a>

<!-- 文字轉換：大小寫 -->
<p class="uppercase tracking-wide text-sm text-gray-500">important notice</p>

<!-- v4 文字陰影：淺色標題疊在圖片上增強可讀性 -->
<div class="relative bg-cover bg-center h-40 rounded-lg
            bg-[url('/hero.jpg')] flex items-center justify-center">
  <h2 class="text-3xl font-bold text-white text-shadow-md text-shadow-black/40">
    圖片上的標題
  </h2>
</div>

text-shadow-* 是 v4.1 才引入的全新工具，在此之前若要給文字加陰影只能寫任意值或自訂 CSS。搭配 text-shadow-{color} 語法（如 text-shadow-black/40）還能控制陰影顏色與透明度，讓淺色文字在複雜背景上依然清晰。這個範例也順帶示範了 decoration-* 系列的表達力——底線不再只有「有或沒有」，你可以用 decoration-cyan-500 換底線顏色、decoration-2 加粗、underline-offset-4 拉開底線與文字的距離、甚至 decoration-wavy 換成波浪樣式。這些細節在做設計感連結或標記重點時特別好用，全部都是不必寫一行 CSS 的組合。

常見錯誤與最佳實踐

四個最容易踩的排版坑

坑一：truncate 沒效果，省略號不出現。 症狀是加了 truncate 文字卻照樣換行或溢出。原因幾乎都是「容器沒有寬度限制」或「在 Flex 裡沒加 min-w-0」。解法是給容器 max-w-*，Flex item 則補上 min-w-0：

<!-- ❌ 沒有寬度限制，truncate 失效 -->
<div class="flex">
  <p class="truncate">很長的文字...</p>
</div>

<!-- ✅ 加 min-w-0 讓 flex item 可被壓縮 -->
<div class="flex">
  <p class="flex-1 min-w-0 truncate">很長的文字...</p>
</div>

坑二：在中文段落用 text-justify。 兩端對齊（justify）是為西文設計的，透過調整單字間空白來對齊左右邊界；中文字之間沒有空白可調，用了幾乎沒效果，還可能造成怪異的字距。中文長文改善可讀性應該靠行高，不是對齊：

<p class="text-justify">中文段落...</p>       <!-- ❌ 中文 justify 幾乎無效 -->
<p class="leading-relaxed text-pretty">中文段落...</p>  <!-- ✅ 用行高與 pretty -->

坑三：小字用粗體，反而更難讀。 在 text-xs 這種小字上用 font-bold，筆畫擠在一起會讓輔助說明文字更難辨認。小字要強調，用 font-medium 就夠了：

<span class="text-xs font-bold text-gray-500">說明文字</span>    <!-- ❌ 太擠 -->
<span class="text-xs font-medium text-gray-500">說明文字</span>  <!-- ✅ 剛好 -->

坑四：line-clamp 又加了 overflow-hidden。 line-clamp-* 本身已內建 overflow: hidden，重複加多餘。真正要注意的是別讓父容器設定固定高度干擾它，讓 line-clamp 自己控制截斷行數即可。若想做「展開／收合」的效果，可以搭配 peer 或 group 狀態，用 line-clamp-none 在互動時取消行數限制：

<!-- 用 checkbox 的 peer 狀態切換展開／收合 -->
<input type="checkbox" id="expand" class="hidden peer">
<p class="line-clamp-3 peer-checked:line-clamp-none text-sm leading-relaxed text-gray-600">
  很長的內容文字，預設只顯示三行，勾選後展開全部。
</p>
<label for="expand" class="text-sm text-cyan-600 cursor-pointer peer-checked:hidden">
  展開更多
</label>

排版最佳實踐清單

• 標題用 text-balance，段落用 text-pretty：前者平衡標題各行長度，後者消除段落孤字，是 v4 最值得養成的兩個習慣。
• 大標題加 tracking-tight：字級越大，字距視覺上越鬆，收緊一點更精緻。
• 全大寫小標籤加 tracking-widest：uppercase 配寬字距是提升小標籤辨識度的經典組合。
• 內文用 leading-relaxed：長文閱讀最舒服的行高，尤其中文更需要充足行距。
• 善用字級簡寫 text-sm/6：一次設好字級與行高，class 更精簡。
• 淺色文字疊圖片用 text-shadow-md：v4 新工具，比自訂 CSS 省事，可讀性立刻提升。

小結

這是 TailwindCSS 完整教學 系列的第七篇，也是 TW-3 版面章節前的排版基礎課。上一篇《v4 遷移指南》我們收攏了所有 v3 到 v4 的破壞性變更、走過完整的升級流程；這一篇則正式進入 utility 實戰，從最日常的文字排版開始，把設計系統的字級 Token 真正用在畫面上。回顧幾個重點：

• 字級與行高：text-{size} 附帶合理的預設行高，v4 的 text-sm/6 斜線語法能一次設好兩者。
• 三組微調工具：字重 font-{weight}、字距 tracking-*、行高 leading-*，三者搭配讓文字從「能看」變「好讀」。
• v4 智慧換行：標題用 text-balance 平衡各行、段落用 text-pretty 消除孤字，是最該養成的習慣。
• v4 文字陰影：text-shadow-*（v4.1 新增）讓淺色文字疊在圖片上依然清晰，是 v3 沒有的能力。
• 文字截斷：truncate 單行、line-clamp-3 多行，關鍵在容器要有寬度、Flex item 要加 min-w-0。

排版工具是你和使用者溝通的第一道介面——字排得好，內容還沒讀就先贏了一半。下一篇 《TailwindCSS Layout 與 Display》，我們會從文字往外走一層，進入版面的骨架：block、inline、flex、grid 這些 display 工具類，看 Tailwind 如何用一組 utility 掌控元素的排列方式。TW-3 版面章正式開始。