Height

Shorthand for height/min-height/max-height is .{bp}-{min|max}-h-{size}

Example:

.h-5

.min-h-5

.max-h-5

.md-max-h-5

.md-h-5

Small Heights

For Small heights you can use .h-0 to .h-10

Height Size Class Min/Max Responsive
height: 0.0rem; .h-0 {min|max}-h-0 .{bp}-h-0
height: 0.25rem; .h-1 {min|max}-h-1 .{bp}-h-1
height: 0.5rem; .h-2 {min|max}-h-2 .{bp}-h-2
height: 0.75rem; .h-3 {min|max}-h-3 .{bp}-h-3
height: 1.0rem; .h-4 {min|max}-h-4 .{bp}-h-4
height: 1.25rem; .h-5 {min|max}-h-5 .{bp}-h-5
height: 1.5rem; .h-6 {min|max}-h-6 .{bp}-h-6
height: 1.75rem; .h-7 {min|max}-h-7 .{bp}-h-7
height: 2.0rem; .h-8 {min|max}-h-8 .{bp}-h-8
height: 2.25rem; .h-9 {min|max}-h-9 .{bp}-h-9
height: 2.5rem; .h-10 {min|max}-h-10 .{bp}-h-10

Large Heights

For large heights you can use .h-l1 to .h-l10 represents 1rem to 10rem

Height Size Class
height: 1rem; .h-l1
height: 2rem; .h-l2
height: 3rem; .h-l3
height: 4rem; .h-l4
height: 5rem; .h-l5
height: 6rem; .h-l6
height: 7rem; .h-l7
height: 8rem; .h-l8
height: 9rem; .h-l9
height: 10rem; .h-l10

Relative Heights

For relative heights in percent or viewport height shorthand is pc and vh respectively

Height Size Class
height: 25%; .h-25pc
height: 33%; .h-33pc
height: 50%; .h-50pc
height: 66%; .h-66pc
height: 75%; .h-75pc
height: 100%; .h-100pc
height: 25vh; .h-25vh
height: 50vh; .h-50vh
height: 75vh; .h-75vh
height: 100vh; .h-100vh

Other Options

For 0 height, 1px height and auto

Height Size Class
height: 0; .h-0
height: 1px; .h-1px
height: auto; .h-auto

Responsive Height

Height will maintain aspect ratio

<!--class: h-1by1-->
<div class="relative bg-blue w-25pc h-1by1">
    <div class="absolute-center white text-center">
        .h-1by1
    </div>
</div>
.h-1by1
<!--class: h-1by2-->
<div class="relative bg-blue w-25pc h-1by1">
    <div class="absolute-center white text-center">
        .h-1by2
    </div>
</div>
.h-1by2
<!--class: h-9by16-->
<div class="relative bg-blue w-25pc h-9by16">
    <div class="absolute-center white text-center">
        .h-9by16
    </div>
</div>
.h-9by16
<!--class: h-3by4-->
<div class="relative bg-blue w-25pc h-3by4">
    <div class="absolute-center white text-center">
        .h-3by4
    </div>
</div>
.h-3by4