https://benzhub.github.io/tags/%E5%B0%BA%E5%AF%B8/Recent content in 尺寸 on BenzHubHugozh-TWThu, 13 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/013-sizing/Thu, 13 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/013-sizing/<blockquote> <p>在 <strong>TailwindCSS</strong> 裡，<strong>尺寸系統（Sizing）</strong> 決定了版面上每個元素到底該「多大」——按鈕多寬、頭像多高、容器最大寬度是多少、全螢幕區塊該用哪種高度單位。只要用 <code>w-*</code>（<code>width</code>）、<code>h-*</code>（<code>height</code>）控制寬高，用 <code>min-w-*</code>／<code>max-w-*</code>／<code>min-h-*</code>／<code>max-h-*</code> 設下上下限，再搭配 v4 新增的 <code>size-*</code> 雙軸簡寫、分數寬度 <code>w-1/2</code>、螢幕與容器單位 <code>w-full</code>／<code>min-h-dvh</code>，就能讓元素大小落在同一套一致刻度上。這是 <strong>TailwindCSS 完整教學</strong> 系列的第十三篇，我們會把寬、高、上下限、<code>size-*</code>、內容尺寸與任意值一次講透，以 v4 為預設、標註與 v3 的差異。</p> </blockquote>