Height

Set the height for an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

h-0
height: 0;
h-1
height: .25rem;
h-2
height: .5rem;
h-3
height: .75rem;
h-4
height: 1rem;
h-5
height: 1.25rem;
h-6
height: 1.5rem;
h-7
height: 1.75rem;
h-8
height: 2rem;
h-9
height: 2.25rem;
h-10
height: 2.5rem;
h-11
height: 2.75rem;
h-12
height: 3rem;
h-13
height: 3.25rem;
h-14
height: 3.5rem;
h-15
height: 3.75rem;
h-16
height: 4rem;
h-17
height: 4.25rem;
h-18
height: 4.5rem;
h-19
height: 4.75rem;
h-20
height: 5rem;
h-21
height: 5.25rem;
h-22
height: 5.5rem;
h-23
height: 5.75rem;
h-24
height: 6rem;
h-25
height: 6.25rem;
h-26
height: 6.5rem;
h-27
height: 6.75rem;
h-28
height: 7rem;
h-29
height: 7.25rem;
h-30
height: 7.5rem;
h-31
height: 7.75rem;
h-32
height: 8rem;
h-33
height: 8.25rem;
h-34
height: 8.5rem;
h-35
height: 8.75rem;
h-36
height: 9rem;
h-37
height: 9.25rem;
h-38
height: 9.5rem;
h-39
height: 9.75rem;
h-40
height: 10rem;
h-41
height: 10.25rem;
h-42
height: 10.5rem;
h-43
height: 10.75rem;
h-44
height: 11rem;
h-45
height: 11.25rem;
h-46
height: 11.5rem;
h-47
height: 11.75rem;
h-48
height: 12rem;
h-49
height: 12.25rem;
h-50
height: 12.5rem;
h-51
height: 12.75rem;
h-52
height: 13rem;
h-53
height: 13.25rem;
h-54
height: 13.5rem;
h-55
height: 13.75rem;
h-56
height: 14rem;
h-57
height: 14.25rem;
h-58
height: 14.5rem;
h-59
height: 14.75rem;
h-60
height: 15rem;
h-61
height: 15.25rem;
h-62
height: 15.5rem;
h-63
height: 15.75rem;
h-64
height: 16rem;
h-65
height: 16.25rem;
h-66
height: 16.5rem;
h-67
height: 16.75rem;
h-68
height: 17rem;
h-69
height: 17.25rem;
h-70
height: 17.5rem;
h-71
height: 17.75rem;
h-72
height: 18rem;
h-73
height: 18.25rem;
h-74
height: 18.5rem;
h-75
height: 18.75rem;
h-76
height: 19rem;
h-77
height: 19.25rem;
h-78
height: 19.5rem;
h-79
height: 19.75rem;
h-80
height: 20rem;
h-81
height: 20.25rem;
h-82
height: 20.5rem;
h-83
height: 20.75rem;
h-84
height: 21rem;
h-85
height: 21.25rem;
h-86
height: 21.5rem;
h-87
height: 21.75rem;
h-88
height: 22rem;
h-89
height: 22.25rem;
h-90
height: 22.5rem;
h-91
height: 22.75rem;
h-92
height: 23rem;
h-93
height: 23.25rem;
h-94
height: 23.5rem;
h-95
height: 23.75rem;
h-96
height: 24rem;
h-97
height: 24.25rem;
h-98
height: 24.5rem;
h-99
height: 24.75rem;
h-100
height: 25rem;
h-auto
height: auto;
h-dvh
height: 100dvh;
h-dvw
height: 100dvw;
h-vh
height: 100vh;
h-vw
height: 100vw;
h-vi
height: 100vi;
h-vb
height: 100vb;
h-svh
height: 100svh;
h-svw
height: 100svw;
h-lvh
height: 100lvh;
h-lvw
height: 100lvw;
h-vmin
height: 100vmin;
h-vmax
height: 100vmax;
h-fc
height: fit-content;
h-full
height: 100%;
h-half
height: 50%;
h-max
height: max-content;
h-min
height: min-content;
h-px
height: 1px;
h-s
height: stretch;
h-sm
height: 40rem;
h-md
height: 48rem;
h-lg
height: 64rem;
h-xl
height: 80rem;
h-xxl
height: 96rem;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:h-(value)
Small≥640px
md:h-(value)
Medium≥768px
lg:h-(value)
Large≥1024px
xxl:h-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:h-(value)

Negative Values

Use negative variants to apply negative height values.

Use the -- syntax to apply negative numeric values.

Syntax:h--(value)