Fixed and fluid heights

Utilities for controlling the height of an element.

In this article

Utilities for setting the height of an element

Class Properties
.h-px height: 1px;
.h-0 height: 0;
.h-1 height: .25rem;
.h-2 height: .5rem;
.h-3 height: .75rem;
.h-4 height: 1rem;
.h-5 height: 1.5rem;
.h-6 height: 2rem;
.h-7 height: 3rem;
.h-8 height: 4rem;
.h-9 height: 6rem;
.h-auto height: auto;
.h-full height: 100%;
.h-screen height: 100vh;


Fixed height

Use .h-{number|px} to apply a fixed height to an element.




<div class="border border-4 border-solid"></div>
<div class="border border-4 border-dashed"></div>
<div class="border border-4 border-dotted"></div>

Fluid height

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


Use .h-auto to let the browser determine the height for the element.

Screen height

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

<div class="bg-gray-400 h-screen"></div>


By default, only responsive variants are generated for height utilities.


To control the height of an element at a specific breakpoint, add a {screen}: prefix to any existing height utility.

For example, use .md:h-4 to apply the h-4 utility at only medium screen sizes and above.


To include hover-state variants like .hover:h-4, add "height" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...