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; |
Usage
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.
Auto
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>Variants
By default, only responsive variants are generated for height utilities.
Responsive
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.
Hover-state
To include hover-state variants like .hover:h-4, add "height" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"height",
);