TailwindCSS 尺寸系統：width、height、size-* 完整指南 | TailwindCSS 完整教學

在 TailwindCSS 裡，尺寸系統（Sizing） 決定了版面上每個元素到底該「多大」——按鈕多寬、頭像多高、容器最大寬度是多少、全螢幕區塊該用哪種高度單位。只要用 w-*（width）、h-*（height）控制寬高，用 min-w-*／max-w-*／min-h-*／max-h-* 設下上下限，再搭配 v4 新增的 size-* 雙軸簡寫、分數寬度 w-1/2、螢幕與容器單位 w-full／min-h-dvh，就能讓元素大小落在同一套一致刻度上。這是 TailwindCSS 完整教學 系列的第十三篇，我們會把寬、高、上下限、size-*、內容尺寸與任意值一次講透，以 v4 為預設、標註與 v3 的差異。

前言

尺寸（Sizing） 指的是元素在畫面上佔據的「寬度」與「高度」——對應 CSS 的 width、height，以及為它們設下界線的 min-width／max-width／min-height／max-height。上一篇 《間距系統》 我們學會了怎麼用 padding／margin／gap 控制元素內部與彼此之間的「留白」，讓版面有呼吸感；但留白之外，每個元素本身該「多大」，同樣是決定版面比例協調與否的關鍵。一個按鈕過寬會顯得笨重、頭像忽大忽小會顯得雜亂、內容區太寬會讓文字難以閱讀——尺寸拿捏得好，版面才會從「疏密有致」再進化到「比例協調」。尺寸系統就是掌控這門「大小的分寸」的工具箱。

用一個現實世界的類比來理解 width／height 與 min/max 的關係：想像一個能伸縮的窗簾。 窗簾本身的寬度就是 width——你希望它平常撐開多寬；但窗簾軌道左右各有一個擋片，決定它「最窄能收到多窄」與「最寬能拉到多寬」，這兩個擋片就是 min-width 與 max-width。平常窗簾隨著風（父容器）自由伸縮，但永遠不會窄於左擋片、也不會寬於右擋片。width 是「想要的值」，min/max 是「不可逾越的界線」——理解這個「想要值 vs 硬界線」的分野，你就抓住了尺寸系統一半的精髓，因為響應式佈局最常用的技巧，正是「彈性寬度 + 最大寬度上限」的組合（如 w-full max-w-2xl）。

而 TailwindCSS 的妙處在於，尺寸和間距一樣走一致的刻度（scale）：在 v4 裡，w-*／h-* 的數字刻度與 p-*／m-* 共用同一個 --spacing 基準（0.25rem／4px），所以 w-4 是 16px、w-64 是 256px，整個網站的尺寸與間距都落在同一套節奏上。除了數字刻度，它還提供分數（w-1/2）、百分比與容器寬度（w-full）、視口單位（w-screen／min-h-dvh）、內容尺寸（w-fit／w-max／w-min），以及 v4 招牌的 size-* 雙軸簡寫，把「設定大小」這件事整理得井井有條。

本篇你將學到：

• 寬與高：w-*（width）、h-*（height）的數字刻度、w-auto／h-full，以及它們與 --spacing 共用基準的設計
• 上下限：min-w-*／max-w-*／min-h-*／max-h-* 如何設界線，max-w-* 的語義刻度（max-w-sm ～ max-w-7xl、max-w-prose）
• v4 的 size-*：一次設定寬高的雙軸簡寫，size-10 = w-10 h-10，正方形元素的最佳解
• 分數、螢幕與容器單位：w-1/2／w-2/3 分數寬度、w-full vs w-screen、min-h-dvh／svh／lvh 現代視口單位
• 內容尺寸與任意值：w-fit／w-max／w-min（fit/max/min-content）、以及 w-[320px]／w-[calc(100%-2rem)] 任意值

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

核心概念

尺寸工具類的分類地圖

尺寸系統的工具乍看很多，但抓住兩條軸線就能秒懂：一是「控制的是寬度（w）還是高度（h）」，二是「這個值是『理想值』、『下限（min）』還是『上限（max）』」。v4 又補上一顆同時管寬高的 size-*。下面這張表是整篇文章的地圖：

規律非常清楚：字首 w 管寬、h 管高；前綴 min- 是下限、max- 是上限、無前綴是理想值。而 size-* 是 v4 才有的「雙軸簡寫」，一顆 class 同時設定 width 和 height，專為寬高相等的正方形元素而生。記住這套規律，你就能反推出任何一顆尺寸 class，不必死背。

尺寸值的四大來源：刻度、分數、關鍵字、單位

尺寸 class 後面能接什麼「值」？大致分成四類，這是尺寸系統比間距系統更豐富的地方：

其中數字刻度是 v4 一致性的核心。在 v4 裡，w-*／h-* 的數字和 p-*／m-* 走同一條公式：calc(var(--spacing) * <n>)，預設 --spacing 為 0.25rem，所以 w-4 = calc(0.25rem * 4) = 1rem（16px）、w-64 = 256px。這代表任意正整數倍數在 v4 都開箱即用——w-13、h-17、size-25 全部有效，因為它們只是把數字代進公式而已。而且只要在 @theme 覆寫一次 --spacing，整套間距與尺寸就一起等比縮放，一致性遠勝 v3。

@import "tailwindcss";

@theme {
  --spacing: 0.2rem;   /* 一次覆寫，p-*、m-*、w-*、h-* 全部同步縮小 */
}

v4 差異標註：v3 的 w-*／h-* 數字刻度是硬編碼的靜態對照表，表外的值（如 w-13）不存在，要用任意值或去 config 擴充；v4 改為由單一 --spacing 變數以 calc() 動態推導，任意倍數皆成立，且與 p-*／m-*／gap-* 共用同一基準。

max-w-* 的語義刻度：不是數字，是「尺寸名稱」

寬度上限 max-w-* 有一組特別的值，它不走數字刻度，而是用「T-shirt 尺寸」語義命名——這是排版最常用的一組 class，值得單獨記：

這裡有兩顆特別實用的值。max-w-prose 把寬度限制在 65ch（約 65 個字元寬），正好落在「每行 60～75 字元」的最佳閱讀範圍，是文章內文的黃金寬度。max-w-none 則用來「解除」上限——常見於某個元件預設有 max-w-*、你想在特定情境讓它撐滿時。而 max-w-full 是防溢出的保險（max-width: 100%），常和固定寬度或 w-screen 搭配，確保元素永不超出父容器。

v4 差異標註：v4 的 w-* 也能直接使用這組容器語義刻度（如 w-xs = 20rem、w-7xl = 80rem），適合以語義尺寸直接設固定寬度；v3 的 w-* 只吃數字、分數與關鍵字，語義刻度僅限 max-w-* 使用。此外 v3 有 max-w-screen-sm／max-w-screen-lg 等對應斷點的上限值，v4 已改由容器語義刻度與斷點系統整合。

現代視口單位：screen、dvh、svh、lvh 的差別

做「全螢幕」區塊時，高度單位的選擇是手機體驗的關鍵。h-screen（100vh）在桌面沒問題，但在手機上，網址列與工具列會隨捲動出現或隱藏，導致「視口高度」其實是浮動的。CSS 為此引入了三個現代單位，Tailwind 全部支援：

手機上的視口高度單位（差異最明顯）
────────────────────────────────────────────

┌────────────────────────┐  ← 螢幕頂部
│  🌐 網址列              │  ← 瀏覽器 UI（會隨捲動縮起）
├────────────────────────┤  ← svh 從這裡起算（UI 全展開時的可見高度）
│                        │
│   內容可見區            │
│                        │
├────────────────────────┤  ← dvh：跟隨當前 UI 狀態「動態」變化
│  ■ ■ ■  工具列          │  ← 瀏覽器 UI
└────────────────────────┘  ← lvh 到這裡（UI 全隱藏時的最大可見高度）

svh（Small）  = 最小可見高度（UI 全展開時）→ 最保守，永不裁切
lvh（Large）  = 最大可見高度（UI 全隱藏時）→ 需要滿版空間時
dvh（Dynamic）= 當前實際可見高度（隨捲動即時更新）→ 最精準

實務建議很簡單：手機全螢幕首頁英雄區用 min-h-dvh（最貼合當前畫面）；若擔心 dvh 隨捲動變化可能造成佈局跳動，保守方案用 min-h-svh（永遠是最小可見高度、絕不裁切）；桌面應用兩者差異不大，min-h-screen 仍可接受。

v4 差異標註：w-svw／w-lvw／w-dvw／h-svh／h-lvh／h-dvh 這些現代視口單位在 v4 中都是正式的內建 class；v3 需要較新版本或手動擴充才能使用，並非開箱即用。

實作範例

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

範例一：彈性寬度 + 最大寬度的響應式容器

最經典的響應式招式，就是「w-full 彈性撐滿 + max-w-* 設上限 + mx-auto 置中」——這是幾乎每個網站主內容容器的標準寫法，讓內容在手機填滿、在寬螢幕不至於拉得太長：

<!-- 響應式內容容器：小螢幕填滿、寬螢幕限制上限並置中 -->
<div class="w-full max-w-4xl mx-auto px-4">
  <h1 class="text-3xl font-bold text-gray-900">頁面標題</h1>
  <p class="mt-4 text-gray-600 max-w-prose">
    這段內文用 max-w-prose 把行寬限制在約 65 字元，是最舒適的閱讀寬度。
  </p>
</div>

這裡三顆尺寸相關 class 各司其職。w-full 讓容器在小螢幕填滿父層寬度（width: 100%）；max-w-4xl 設下 56rem（896px）的上限，寬螢幕上再寬也不超過這個值，避免文字行拉得太長難以閱讀；mx-auto 則把有上限的容器水平置中。這正是「理想值（w-full）＋ 硬界線（max-w-4xl）」組合的威力——內容既能彈性適應各種螢幕，又永遠不會失控。內文再單獨套一個 max-w-prose，把段落行寬進一步收到黃金閱讀寬度。這種「彈性 + 上限」的思路，是響應式尺寸最該內化的直覺。

範例二：響應式圖片與固定比例容器

圖片與影片容器最常見的需求，是「填滿容器寬度、但維持固定比例避免變形」。這裡結合 w-full、h-* 與 object-cover：

<!-- 影片縮圖：固定 16:9 比例，圖片填滿不變形 -->
<div class="w-full max-w-2xl mx-auto">
  <div class="relative aspect-video overflow-hidden rounded-xl bg-gray-900">
    <img src="/thumbnail.jpg" alt="影片縮圖"
         class="w-full h-full object-cover">
    <span class="absolute bottom-3 right-3 rounded bg-black/80 px-2 py-1 text-xs font-medium text-white">
      12:34
    </span>
  </div>
</div>

關鍵在圖片的 w-full h-full object-cover 這組合。外層容器用 aspect-video（16:9 比例）決定框的形狀，內層 <img> 用 w-full h-full 撐滿整個框，再用 object-cover 讓圖片等比縮放並裁掉溢出部分——這樣無論原圖比例如何，都能完美填滿框而不變形、不留白邊。這是處理使用者上傳圖片（比例不可控）時最穩健的做法。若改用 object-contain，則會完整顯示圖片但可能留白邊，視需求選擇。

範例三：頭像系統與 size-* 雙軸簡寫

頭像、圖示這類「寬高相等」的正方形元素，正是 v4 size-* 大放異彩的舞台——一顆 class 同時搞定寬高，不再需要重複的 w-* h-*：

<!-- v4：用 size-* 一次設定寬高，正方形元素最精簡的寫法 -->
<div class="flex items-center gap-3">
  <img src="/avatar.jpg" alt="用戶" class="size-8 rounded-full object-cover">   <!-- 32px -->
  <img src="/avatar.jpg" alt="用戶" class="size-10 rounded-full object-cover"> <!-- 40px，最常用 -->
  <img src="/avatar.jpg" alt="用戶" class="size-12 rounded-full object-cover"> <!-- 48px -->
</div>

<!-- 對照：v3（或不用 size 時）需要分開寫兩顆 class -->
<img src="/avatar.jpg" alt="用戶" class="w-10 h-10 rounded-full object-cover">

size-8 完全等同 w-8 h-8、size-10 等同 w-10 h-10。好處有二：一是精簡，正方形元素只寫一顆 class；二是不會不同步——過去分開寫 w-10 h-10，改尺寸時很容易「改了寬忘了改高」導致頭像變成橢圓，size-10 從根本杜絕這個 bug。size-* 同樣共用 --spacing 基準，所以任意倍數（size-13）、分數（size-1/2）、任意值（size-[3.25rem]）通通支援。圖示（SVG）也很適合：<svg class="size-5"> 比 w-5 h-5 清爽。

v4 差異標註：size-* 是 v4 才新增的 class，v3 沒有這顆簡寫，在 v3 專案裡正方形元素仍須分開寫 w-* 和 h-*。

範例四：側邊欄 + 主內容的佈局

尺寸系統的實戰高潮，是搭配 Flexbox 做「固定寬側邊欄 + 彈性主內容」的經典後台佈局，這裡會用到 w-* 固定寬、flex-1 彈性填充、min-h-dvh 全螢幕高、min-w-0 防溢出：

<!-- 固定側邊欄 + 彈性主內容，全螢幕高 -->
<div class="flex min-h-dvh">
  <!-- 側邊欄：固定 256px 寬、不縮放 -->
  <aside class="w-64 flex-none bg-gray-900 text-white">
    <div class="border-b border-gray-700 p-6 text-xl font-bold">Dashboard</div>
    <nav class="space-y-1 p-4">
      <a href="#" class="block rounded-lg px-3 py-2 hover:bg-gray-800">首頁</a>
      <a href="#" class="block rounded-lg px-3 py-2 hover:bg-gray-800">設定</a>
    </nav>
  </aside>

  <!-- 主內容：吃掉剩餘寬度、可獨立捲動 -->
  <main class="min-w-0 flex-1 overflow-y-auto">
    <header class="sticky top-0 z-10 h-16 border-b border-gray-200 bg-white px-6 flex items-center">
      <h1 class="text-lg font-semibold">頁面標題</h1>
    </header>
    <div class="p-6"><!-- 主要內容 --></div>
  </main>
</div>

這裡幾顆尺寸 class 分工明確。側邊欄 w-64（256px）是固定寬度、flex-none 讓它不被壓縮；主內容 flex-1 吃掉剩餘的所有寬度。外層 min-h-dvh 讓整個佈局至少填滿一個動態視口高度（手機也精準）。頂部列 h-16（64px）是固定高度、sticky top-0 讓它捲動時黏在頂端。特別注意主內容的 min-w-0——這是一顆容易被忽略但很重要的 class：Flexbox 子項預設 min-width: auto，內容過寬（如長字串、大表格）時會撐破容器導致溢出；min-w-0 把最小寬度重置為 0，允許子項在必要時收縮，是防止 flex 佈局溢出的關鍵護身符。

範例五：內容尺寸與任意值

最後補上兩組進階寫法：依內容決定大小的 fit/max/min-content，以及跳脫刻度的任意值。

<!-- 內容尺寸：讓寬度剛好包住內容 -->
<button class="w-fit px-4 py-2 bg-cyan-600 text-white rounded-lg">恰好包住文字</button>

<div class="w-max whitespace-nowrap bg-gray-100 px-3 py-1 rounded">這段文字不會換行，容器撐到完整內容寬</div>

<div class="w-min bg-gray-100 p-2">盡量窄</div>

<!-- 任意值：刻度不夠精準時，直接指定確切數值 -->
<div class="w-[320px]">固定 320px</div>
<div class="w-[calc(100%-2rem)]">計算值：父容器寬減去 2rem</div>
<div class="max-w-[65ch] min-h-[480px]">任意上下限</div>
<div class="size-[3.25rem]">52px 正方形</div>

上半展示內容尺寸三兄弟。w-fit（fit-content）讓元素寬度剛好包住內容、但不超過父容器，最適合按鈕、標籤這種「恰好貼合內容」的元素——比預設區塊元素撐滿整行乾淨太多。w-max（max-content）則讓容器撐到「內容完全不換行」的寬度，適合 tooltip、不該斷行的程式碼片段。w-min（min-content）取「最長不可分割單位（如最長單字）」的寬度，用於需要極度緊湊的場景。下半展示任意值：當一致刻度剛好沒有你要的數字、或需求就是某個固定像素（如設計稿指定的 320px、避開某高度的固定元件），用方括號 w-[320px]、min-h-[480px] 就能指定確切值，甚至能塞 calc()。不過任意值屬於「逃生艙」，能用刻度、分數、語義值就盡量用，才能維持全站的比例節奏。

常見錯誤與最佳實踐

四個最容易踩的尺寸坑

坑一：用 w-screen 卻造成水平捲軸溢出。 w-screen 是 width: 100vw，而 100vw 包含垂直捲軸的寬度；w-full（width: 100%）則不含。當頁面夠長、瀏覽器顯示了右側垂直捲軸時，w-screen 的元素會比實際可用寬度多出約 15～17px，把頁面撐出一條惱人的水平捲軸。根治法：一律優先用 w-full，只有真的需要「打破父容器、橫跨整個視口」的全出血區塊時才動用 w-screen，並自行處理捲軸溢出。

<!-- ❌ w-screen 含捲軸寬度，頁面有垂直捲軸時會撐出水平捲軸 -->
<div class="w-screen bg-cyan-600">...</div>

<!-- ✅ w-full 相對父容器，永不溢出 -->
<div class="w-full bg-cyan-600">...</div>

坑二：手機全螢幕誤用 h-screen／min-h-screen。 h-screen（100vh）在手機上是「固定」值，等於瀏覽器 UI 全展開時的高度，但手機捲動時 UI 會縮起、可見區其實變大，導致全螢幕區塊高度不精準、內容可能被底部工具列裁切。根治法：手機全螢幕改用 min-h-dvh（動態視口高度，跟隨當前畫面），或保守用 min-h-svh。

<!-- ❌ 手機上 100vh 不等於當前可見高度，可能被工具列裁切 -->
<section class="h-screen">...</section>

<!-- ✅ dvh 動態跟隨當前可見區域 -->
<section class="min-h-dvh">...</section>

坑三：h-full 沒生效，子元素高度變成 0。 h-full 是 height: 100%，而百分比高度是相對父容器的高度計算的。若父容器高度沒有明確定義（只由內容決定），h-full 的子元素會算不出高度、塌成 0。根治法：確保父容器有明確高度（如 h-screen、h-64、min-h-dvh），或改用 Flexbox 的 flex-1 讓子項吃掉剩餘空間（flex-1 不依賴父容器已知高度）。

<!-- ❌ 父容器沒有明確高度，h-full 子元素塌成 0 -->
<div>
  <div class="h-full bg-cyan-100">看不見我</div>
</div>

<!-- ✅ 父容器有明確高度，h-full 才有參照 -->
<div class="h-64">
  <div class="h-full bg-cyan-100">正常填滿</div>
</div>

坑四：固定寬度 w-[600px] 在小螢幕溢出。 寫死像素寬度的元素，在比它窄的螢幕上會超出視口、觸發水平捲軸。根治法：改用「彈性寬 + 最大寬上限」的響應式組合 w-full max-w-[600px]——小螢幕填滿、大螢幕不超過 600px，兩全其美。

<!-- ❌ 固定寬，小螢幕溢出 -->
<div class="w-[600px]">...</div>

<!-- ✅ 彈性寬 + 上限，響應式 -->
<div class="w-full max-w-[600px]">...</div>

尺寸系統最佳實踐清單

• 響應式寬度用「w-full + max-w-*」：彈性填滿小螢幕、上限守住大螢幕，是最通用的響應式尺寸範式。
• 手機全螢幕用 min-h-dvh：比 min-h-screen（100vh）更貼合當前畫面；保守可用 min-h-svh，避免內容被工具列裁切。
• 正方形元素用 size-*（v4）：頭像、圖示、方形按鈕一顆 size-10 搞定，比 w-10 h-10 精簡且不會寬高不同步。
• 文章內文用 max-w-prose：把行寬限制在約 65 字元，是最舒適的閱讀寬度。
• 多用刻度、少用任意值：w-64／max-w-4xl 這類刻度與語義值能維持全站比例節奏；w-[600px] 是逃生艙，非必要不用。
• flex 子項記得 min-w-0：防止長內容撐破 flex 容器造成溢出，是後台佈局的常備護身符。
• h-full 需父容器有明確高度：否則改用 flex-1 讓子項吃掉剩餘空間，不依賴父容器已知高度。
• 善用 --spacing 統一基準：需要全站尺寸與間距等比縮放時，在 @theme 覆寫一次 --spacing 即可，別逐個 class 硬改。

小結

這是 TailwindCSS 完整教學 系列的第十三篇。上一篇 《間距系統》 我們把「留白的藝術」講透——用 p-* 管內部留白、m-* 管元素間距、gap-* 管子元素間隔，讓版面有恰到好處的呼吸感。那些工具決定元素之間「隔多遠」；而這一篇補上元素本身「有多大」——讓每個按鈕、頭像、容器的尺寸都落在同一套一致刻度上。回顧幾個重點：

• 尺寸命名法一眼看穿：w 管寬、h 管高，min-／max- 前綴是下限／上限、無前綴是理想值；v4 的 size-* 一次管寬高，正方形元素首選。
• 值有四大來源：數字刻度（共用 --spacing，w-13 開箱即用）、分數（w-1/2）、關鍵字（w-full／w-fit／w-auto）、視口單位（w-screen／min-h-dvh）。
• 響應式黃金組合：「w-full 彈性 + max-w-* 上限」讓內容小螢幕填滿、大螢幕守住比例，是最該內化的直覺。
• 視口單位挑對很重要：手機全螢幕用 min-h-dvh（動態、最精準）或 min-h-svh（保守、不裁切），別再用會不準的 100vh。
• 兩大常見坑：w-screen 含捲軸寬度易溢出（改用 w-full）、h-full 需父容器有明確高度（否則改用 flex-1）。

至此，Flexbox、Grid、定位、間距與尺寸——版面章（TW-3）的核心工具你已經全部到手，能精準掌控元素的排列、層疊、留白與大小。本篇是版面章收尾前的倒數第二篇，下一篇 《常見版面模式》 會為這一章畫下句點：我們會把前面所有工具串起來，實戰組裝「聖杯佈局」、「黏性頁首 + 側邊欄」、「響應式卡片網格」、「置中英雄區」等真實專案天天在用的版面骨架，讓你從「認得每顆工具」躍升到「一眼就知道該用哪套組合」。