快速参考

属性
h-0height: 0px;
h-pxheight: 1px;
h-0.5height: 0.125rem; /* 2px */
h-1height: 0.25rem; /* 4px */
h-1.5height: 0.375rem; /* 6px */
h-2height: 0.5rem; /* 8px */
h-2.5height: 0.625rem; /* 10px */
h-3height: 0.75rem; /* 12px */
h-3.5height: 0.875rem; /* 14px */
h-4height: 1rem; /* 16px */
h-5height: 1.25rem; /* 20px */
h-6height: 1.5rem; /* 24px */
h-7height: 1.75rem; /* 28px */
h-8height: 2rem; /* 32px */
h-9height: 2.25rem; /* 36px */
h-10height: 2.5rem; /* 40px */
h-11height: 2.75rem; /* 44px */
h-12height: 3rem; /* 48px */
h-14height: 3.5rem; /* 56px */
h-16height: 4rem; /* 64px */
h-20height: 5rem; /* 80px */
h-24height: 6rem; /* 96px */
h-28height: 7rem; /* 112px */
h-32height: 8rem; /* 128px */
h-36height: 9rem; /* 144px */
h-40height: 10rem; /* 160px */
h-44height: 11rem; /* 176px */
h-48height: 12rem; /* 192px */
h-52height: 13rem; /* 208px */
h-56height: 14rem; /* 224px */
h-60height: 15rem; /* 240px */
h-64height: 16rem; /* 256px */
h-72height: 18rem; /* 288px */
h-80height: 20rem; /* 320px */
h-96height: 24rem; /* 384px */
h-autoheight: auto;
h-1/2height: 50%;
h-1/3height: 33.333333%;
h-2/3height: 66.666667%;
h-1/4height: 25%;
h-2/4height: 50%;
h-3/4height: 75%;
h-1/5height: 20%;
h-2/5height: 40%;
h-3/5height: 60%;
h-4/5height: 80%;
h-1/6height: 16.666667%;
h-2/6height: 33.333333%;
h-3/6height: 50%;
h-4/6height: 66.666667%;
h-5/6height: 83.333333%;
h-fullheight: 100%;
h-screenheight: 100vh;
h-svhheight: 100svh;
h-lvhheight: 100lvh;
h-dvhheight: 100dvh;
h-minheight: min-content;
h-maxheight: max-content;
h-fitheight: fit-content;

基本用法

固定高度

使用 h-{number}h-px 将元素设置为固定高度。

h-96
h-80
h-64
h-48
h-40
h-32
h-24
<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 将元素的高度设置为其父元素的 100%,前提是父元素具有定义的高度。

<div class="h-48">
  <div class="h-full ...">
    <!-- This element will have a height of `12rem` (h-48) -->
  </div>
</div>

视窗高度

使用 h-screen 使元素跨越整个视窗高度。

<div class="h-screen">
  <!-- ... -->
</div>

动态视窗高度

使用 h-dvh 使元素跨越整个视窗高度,该高度会随着浏览器 UI 的扩展或收缩而改变。

在视窗中上下滚动以隐藏/显示浏览器 UI

tailwindcss.com

h-dvh

<div class="h-dvh">
  <!-- ... -->
</div>

大视窗高度

使用 h-lvh 将元素的高度设置为视窗的最大可能高度。这与 100vh 的行为相同。

在视窗中上下滚动以隐藏/显示浏览器 UI

tailwindcss.com

h-lvh

<div class="h-lvh">
  <!-- ... -->
</div>

视窗高度较小

使用 h-svh 将元素的高度设置为视窗的最小高度。

在视窗中上下滚动以隐藏/显示浏览器 UI

tailwindcss.com

h-svh

<div class="h-svh">
  <!-- ... -->
</div>

条件应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如,使用 hover:h-full 仅在悬停时应用 h-full 实用程序。

<div class="h-8 hover:h-full">
  <!-- ... -->
</div>

有关所有可用状态修饰符的完整列表,请查看 悬停、焦点和其它状态 文档。

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗模式、prefers-reduced-motion 等等。例如,使用 md:h-full 仅在中等屏幕尺寸及以上时应用 h-full 实用程序。

<div class="h-8 md:h-full">
  <!-- ... -->
</div>

要了解更多信息,请查看有关 响应式设计暗模式其他媒体查询修饰符 的文档。


使用自定义值

自定义主题

默认情况下,Tailwind 的高度比例尺是 默认间距比例尺 和一些特定于高度的附加值的组合。

您可以通过编辑 tailwind.config.js 文件中的 theme.spacingtheme.extend.spacing 来自定义间距比例尺。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

要单独自定义高度,请使用 tailwind.config.js 文件的 theme.height 部分。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      height: {
        '128': '32rem',
      }
    }
  }
}

主题自定义 文档中了解有关自定义默认主题的更多信息。

任意值

如果您需要使用一个不适合包含在主题中的 height 值,请使用方括号使用任何任意值动态生成属性。

<div class="h-[32rem]">
  <!-- ... -->
</div>

任意值 文档中了解有关任意值支持的更多信息。