Sizing
用於設定元素高度的通用類別。
| Class | Styles |
|---|---|
h-<number> | height: calc(var(--spacing) * <number>); |
h-<fraction> | height: calc(<fraction> * 100%); |
h-auto | height: auto; |
h-px | height: 1px; |
h-full | height: 100%; |
h-screen | height: 100vh; |
h-dvh | height: 100dvh; |
h-dvw | height: 100dvw; |
h-lvh | height: 100lvh; |
h-lvw | height: 100lvw; |
h-svh | height: 100svh; |
h-svw | height: 100svw; |
h-min | height: min-content; |
h-max | height: max-content; |
h-fit | height: fit-content; |
h-lh | height: 1lh; |
h-(<custom-property>) | height: var(<custom-property>); |
h-[<value>] | height: <value>; |
size-<number> | width: calc(var(--spacing) * <number>);
height: calc(var(--spacing) * <number>); |
size-<fraction> | width: calc(<fraction> * 100%);
height: calc(<fraction> * 100%); |
size-auto | width: auto;
height: auto; |
size-px | width: 1px;
height: 1px; |
size-full | width: 100%;
height: 100%; |
size-dvw | width: 100dvw;
height: 100dvw; |
size-dvh | width: 100dvh;
height: 100dvh; |
size-lvw | width: 100lvw;
height: 100lvw; |
size-lvh | width: 100lvh;
height: 100lvh; |
size-svw | width: 100svw;
height: 100svw; |
size-svh | width: 100svh;
height: 100svh; |
size-min | width: min-content;
height: min-content; |
size-max | width: max-content;
height: max-content; |
size-fit | width: fit-content;
height: fit-content; |
size-(<custom-property>) | width: var(<custom-property>);
height: var(<custom-property>); |
size-[<value>] | width: <value>;
height: <value>; |
使用 h-<number> 通用類別（如 h-24 和 h-64）根據間距比例設定元素為固定高度：
<div class="h-96 ...">h-96</div><div class="h-80 ...">h-80</div><div class="h-64 ...">h-64</div><div class="h-48 ...">h-48</div><div class="h-40 ...">h-40</div><div class="h-32 ...">h-32</div><div class="h-24 ...">h-24</div>使用 h-full 或 h-<fraction> 通用類別（如 h-1/2 和 h-2/5）為元素設定百分比高度：
<div class="h-full ...">h-full</div><div class="h-9/10 ...">h-9/10</div><div class="h-3/4 ...">h-3/4</div><div class="h-1/2 ...">h-1/2</div><div class="h-1/3 ...">h-1/3</div>使用 h-screen 通用類別讓元素跨越整個視窗高度：
<div class="h-screen"> <!-- ... --></div>使用 h-dvh 通用類別讓元素跨越整個視窗高度，該高度會隨著瀏覽器 UI 展開或收合而變化：
捲動視窗以查看視窗高度變化
<div class="h-dvh"> <!-- ... --></div>使用 h-lvh 通用類別將元素高度設定為視窗可能的最大高度：
捲動視窗以查看視窗高度變化
<div class="h-lvh"> <!-- ... --></div>使用 h-svh 通用類別將元素高度設定為視窗可能的最小高度：
捲動視窗以查看視窗高度變化
<div class="h-svh"> <!-- ... --></div>使用 size-px、size-4 和 size-full 等通用類別同時設定元素的寬度和高度：
<div class="size-16 ...">size-16</div><div class="size-20 ...">size-20</div><div class="size-24 ...">size-24</div><div class="size-32 ...">size-32</div><div class="size-40 ...">size-40</div>使用 h-[<value>] 語法，根據完全自訂的值來設定 height：
<div class="h-[32rem] ..."> <!-- ... --></div>對於 CSS 變數，你也可以使用 h-(<custom-property>) 語法：
<div class="h-(--my-height) ..."> <!-- ... --></div>這只是 h-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。
在 height 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<div class="h-1/2 md:h-full ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。
h-<number> 和 size-<number> 通用類別由 --spacing 主題變數驅動，可以在你自己的主題中自訂：
@theme { --spacing: 1px; }在主題變數文件中了解更多關於自訂間距比例的資訊。