Sizing

Height

Utilities for setting the height of an element.

Quick reference

Class	Description
h-auto	height: auto
h-full	height: 100%
h-screen	height: 100vw
h-min	height: min-content
h-max	height: max-content
h-fit	height: fit-content
h-{size}	height: {size}
h-{fraction}	height: {fraction}

Available values
{size}: 0, 1, 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96, 112, 128, 144
{fraction}: Any fraction is valid - e.g. 1/5

Basic usage

Fixed heights

Use h-{number} to set an element to a fixed height. Example h-16 = 1.6rem = 16px.

  <div class="h-128 ... "></div>
  <div class="h-64 ... "></div>
  <div class="h-32 ... "></div>
  <div class="h-16 ... "></div>
  <div class="h-8 ... "></div>
  <div class="h-4 ... "></div>
  <div class="h-2 ... "></div>

Full height

Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

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

Viewport height

Use h-screen to make an element span the entire height of the viewport.

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

Arbitrary values

If you need to use a one-off height value, use square brackets to generate a property using any arbitrary value. Example: h-[100] generates height:10rem = 100px.

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

Applying conditionally

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:h-full to apply the h-full utility at only medium screen sizes and above.

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