Height

Controls the height of an element.

Widely available

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

Chrome

Edge

Firefox

Safari

h-0height: 0rem;

h-1height: 0.25rem;

h-2height: 0.5rem;

h-3height: 0.75rem;

h-4height: 1rem;

h-5height: 1.25rem;

h-6height: 1.5rem;

h-7height: 1.75rem;

h-8height: 2rem;

h-9height: 2.25rem;

h-10height: 2.5rem;

h-11height: 2.75rem;

h-12height: 3rem;

h-13height: 3.25rem;

h-14height: 3.5rem;

h-15height: 3.75rem;

h-16height: 4rem;

h-17height: 4.25rem;

h-18height: 4.5rem;

h-19height: 4.75rem;

h-20height: 5rem;

h-21height: 5.25rem;

h-22height: 5.5rem;

h-23height: 5.75rem;

h-24height: 6rem;

h-25height: 6.25rem;

h-26height: 6.5rem;

h-27height: 6.75rem;

h-28height: 7rem;

h-29height: 7.25rem;

h-30height: 7.5rem;

h-31height: 7.75rem;

h-32height: 8rem;

h-33height: 8.25rem;

h-34height: 8.5rem;

h-35height: 8.75rem;

h-36height: 9rem;

h-37height: 9.25rem;

h-38height: 9.5rem;

h-39height: 9.75rem;

h-40height: 10rem;

h-41height: 10.25rem;

h-42height: 10.5rem;

h-43height: 10.75rem;

h-44height: 11rem;

h-45height: 11.25rem;

h-46height: 11.5rem;

h-47height: 11.75rem;

h-48height: 12rem;

h-49height: 12.25rem;

h-50height: 12.5rem;

h-51height: 12.75rem;

h-52height: 13rem;

h-53height: 13.25rem;

h-54height: 13.5rem;

h-55height: 13.75rem;

h-56height: 14rem;

h-57height: 14.25rem;

h-58height: 14.5rem;

h-59height: 14.75rem;

h-60height: 15rem;

h-61height: 15.25rem;

h-62height: 15.5rem;

h-63height: 15.75rem;

h-64height: 16rem;

h-65height: 16.25rem;

h-66height: 16.5rem;

h-67height: 16.75rem;

h-68height: 17rem;

h-69height: 17.25rem;

h-70height: 17.5rem;

h-71height: 17.75rem;

h-72height: 18rem;

h-73height: 18.25rem;

h-74height: 18.5rem;

h-75height: 18.75rem;

h-76height: 19rem;

h-77height: 19.25rem;

h-78height: 19.5rem;

h-79height: 19.75rem;

h-80height: 20rem;

h-81height: 20.25rem;

h-82height: 20.5rem;

h-83height: 20.75rem;

h-84height: 21rem;

h-85height: 21.25rem;

h-86height: 21.5rem;

h-87height: 21.75rem;

h-88height: 22rem;

h-89height: 22.25rem;

h-90height: 22.5rem;

h-91height: 22.75rem;

h-92height: 23rem;

h-93height: 23.25rem;

h-94height: 23.5rem;

h-95height: 23.75rem;

h-96height: 24rem;

h-97height: 24.25rem;

h-98height: 24.5rem;

h-99height: 24.75rem;

h-100height: 25rem;

h-autoheight: auto;

h-dvhheight: 100dvh;

h-dvwheight: 100dvw;

h-vhheight: 100vh;

h-vwheight: 100vw;

h-fcheight: fit-content;

h-fullheight: 100%;

h-halfheight: 50%;

h-maxheight: max-content;

h-minheight: min-content;

h-pxheight: 1px;

h-sheight: stretch;

h-smheight: 40rem;

h-mdheight: 48rem;

h-lgheight: 64rem;

h-xlheight: 80rem;

h-xxlheight: 96rem;

<div class="d-f cg-8 c-white">
  <div class="ai-c bg-indigo d-f h-16 p-3">16</div>
  <div class="ai-c bg-indigo d-f h-28 p-3">28</div>
  <div class="ai-c bg-indigo d-f h-48 p-3">48</div>
</div>

Max Height

Controls the maximum height of an element.

Widely available

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

Chrome

Edge

Firefox

Safari

max-h-0max-height: 0rem;

max-h-1max-height: 0.25rem;

max-h-2max-height: 0.5rem;

max-h-3max-height: 0.75rem;

max-h-4max-height: 1rem;

max-h-5max-height: 1.25rem;

max-h-6max-height: 1.5rem;

max-h-7max-height: 1.75rem;

max-h-8max-height: 2rem;

max-h-9max-height: 2.25rem;

max-h-10max-height: 2.5rem;

max-h-11max-height: 2.75rem;

max-h-12max-height: 3rem;

max-h-13max-height: 3.25rem;

max-h-14max-height: 3.5rem;

max-h-15max-height: 3.75rem;

max-h-16max-height: 4rem;

max-h-17max-height: 4.25rem;

max-h-18max-height: 4.5rem;

max-h-19max-height: 4.75rem;

max-h-20max-height: 5rem;

max-h-21max-height: 5.25rem;

max-h-22max-height: 5.5rem;

max-h-23max-height: 5.75rem;

max-h-24max-height: 6rem;

max-h-25max-height: 6.25rem;

max-h-26max-height: 6.5rem;

max-h-27max-height: 6.75rem;

max-h-28max-height: 7rem;

max-h-29max-height: 7.25rem;

max-h-30max-height: 7.5rem;

max-h-31max-height: 7.75rem;

max-h-32max-height: 8rem;

max-h-33max-height: 8.25rem;

max-h-34max-height: 8.5rem;

max-h-35max-height: 8.75rem;

max-h-36max-height: 9rem;

max-h-37max-height: 9.25rem;

max-h-38max-height: 9.5rem;

max-h-39max-height: 9.75rem;

max-h-40max-height: 10rem;

max-h-41max-height: 10.25rem;

max-h-42max-height: 10.5rem;

max-h-43max-height: 10.75rem;

max-h-44max-height: 11rem;

max-h-45max-height: 11.25rem;

max-h-46max-height: 11.5rem;

max-h-47max-height: 11.75rem;

max-h-48max-height: 12rem;

max-h-49max-height: 12.25rem;

max-h-50max-height: 12.5rem;

max-h-51max-height: 12.75rem;

max-h-52max-height: 13rem;

max-h-53max-height: 13.25rem;

max-h-54max-height: 13.5rem;

max-h-55max-height: 13.75rem;

max-h-56max-height: 14rem;

max-h-57max-height: 14.25rem;

max-h-58max-height: 14.5rem;

max-h-59max-height: 14.75rem;

max-h-60max-height: 15rem;

max-h-61max-height: 15.25rem;

max-h-62max-height: 15.5rem;

max-h-63max-height: 15.75rem;

max-h-64max-height: 16rem;

max-h-65max-height: 16.25rem;

max-h-66max-height: 16.5rem;

max-h-67max-height: 16.75rem;

max-h-68max-height: 17rem;

max-h-69max-height: 17.25rem;

max-h-70max-height: 17.5rem;

max-h-71max-height: 17.75rem;

max-h-72max-height: 18rem;

max-h-73max-height: 18.25rem;

max-h-74max-height: 18.5rem;

max-h-75max-height: 18.75rem;

max-h-76max-height: 19rem;

max-h-77max-height: 19.25rem;

max-h-78max-height: 19.5rem;

max-h-79max-height: 19.75rem;

max-h-80max-height: 20rem;

max-h-81max-height: 20.25rem;

max-h-82max-height: 20.5rem;

max-h-83max-height: 20.75rem;

max-h-84max-height: 21rem;

max-h-85max-height: 21.25rem;

max-h-86max-height: 21.5rem;

max-h-87max-height: 21.75rem;

max-h-88max-height: 22rem;

max-h-89max-height: 22.25rem;

max-h-90max-height: 22.5rem;

max-h-91max-height: 22.75rem;

max-h-92max-height: 23rem;

max-h-93max-height: 23.25rem;

max-h-94max-height: 23.5rem;

max-h-95max-height: 23.75rem;

max-h-96max-height: 24rem;

max-h-97max-height: 24.25rem;

max-h-98max-height: 24.5rem;

max-h-99max-height: 24.75rem;

max-h-100max-height: 25rem;

max-h-automax-height: auto;

max-h-dvhmax-height: 100dvh;

max-h-dvwmax-height: 100dvw;

max-h-vhmax-height: 100vh;

max-h-vwmax-height: 100vw;

max-h-fcmax-height: fit-content;

max-h-fullmax-height: 100%;

max-h-halfmax-height: 50%;

max-h-maxmax-height: max-content;

max-h-minmax-height: min-content;

max-h-pxmax-height: 1px;

max-h-smax-height: stretch;

max-h-smmax-height: 40rem;

max-h-mdmax-height: 48rem;

max-h-lgmax-height: 64rem;

max-h-xlmax-height: 80rem;

max-h-xxlmax-height: 96rem;

The max-h-64 utility sets the maximum height to 16rem, ensuring that the element does not exceed this height regardless of the content inside.

Try changing the vertical size of the box to see how wide it can be at the maximum size.

<div class="ai-c bg-indigo d-f jc-c max-h-64 min-h-16 o-auto p-3 r-v c-white h-32">64</div>

Min Height

Controls the minimum height of an element.

Widely available

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

Chrome

Edge

Firefox

Safari

min-h-0min-height: 0rem;

min-h-1min-height: 0.25rem;

min-h-2min-height: 0.5rem;

min-h-3min-height: 0.75rem;

min-h-4min-height: 1rem;

min-h-5min-height: 1.25rem;

min-h-6min-height: 1.5rem;

min-h-7min-height: 1.75rem;

min-h-8min-height: 2rem;

min-h-9min-height: 2.25rem;

min-h-10min-height: 2.5rem;

min-h-11min-height: 2.75rem;

min-h-12min-height: 3rem;

min-h-13min-height: 3.25rem;

min-h-14min-height: 3.5rem;

min-h-15min-height: 3.75rem;

min-h-16min-height: 4rem;

min-h-17min-height: 4.25rem;

min-h-18min-height: 4.5rem;

min-h-19min-height: 4.75rem;

min-h-20min-height: 5rem;

min-h-21min-height: 5.25rem;

min-h-22min-height: 5.5rem;

min-h-23min-height: 5.75rem;

min-h-24min-height: 6rem;

min-h-25min-height: 6.25rem;

min-h-26min-height: 6.5rem;

min-h-27min-height: 6.75rem;

min-h-28min-height: 7rem;

min-h-29min-height: 7.25rem;

min-h-30min-height: 7.5rem;

min-h-31min-height: 7.75rem;

min-h-32min-height: 8rem;

min-h-33min-height: 8.25rem;

min-h-34min-height: 8.5rem;

min-h-35min-height: 8.75rem;

min-h-36min-height: 9rem;

min-h-37min-height: 9.25rem;

min-h-38min-height: 9.5rem;

min-h-39min-height: 9.75rem;

min-h-40min-height: 10rem;

min-h-41min-height: 10.25rem;

min-h-42min-height: 10.5rem;

min-h-43min-height: 10.75rem;

min-h-44min-height: 11rem;

min-h-45min-height: 11.25rem;

min-h-46min-height: 11.5rem;

min-h-47min-height: 11.75rem;

min-h-48min-height: 12rem;

min-h-49min-height: 12.25rem;

min-h-50min-height: 12.5rem;

min-h-51min-height: 12.75rem;

min-h-52min-height: 13rem;

min-h-53min-height: 13.25rem;

min-h-54min-height: 13.5rem;

min-h-55min-height: 13.75rem;

min-h-56min-height: 14rem;

min-h-57min-height: 14.25rem;

min-h-58min-height: 14.5rem;

min-h-59min-height: 14.75rem;

min-h-60min-height: 15rem;

min-h-61min-height: 15.25rem;

min-h-62min-height: 15.5rem;

min-h-63min-height: 15.75rem;

min-h-64min-height: 16rem;

min-h-65min-height: 16.25rem;

min-h-66min-height: 16.5rem;

min-h-67min-height: 16.75rem;

min-h-68min-height: 17rem;

min-h-69min-height: 17.25rem;

min-h-70min-height: 17.5rem;

min-h-71min-height: 17.75rem;

min-h-72min-height: 18rem;

min-h-73min-height: 18.25rem;

min-h-74min-height: 18.5rem;

min-h-75min-height: 18.75rem;

min-h-76min-height: 19rem;

min-h-77min-height: 19.25rem;

min-h-78min-height: 19.5rem;

min-h-79min-height: 19.75rem;

min-h-80min-height: 20rem;

min-h-81min-height: 20.25rem;

min-h-82min-height: 20.5rem;

min-h-83min-height: 20.75rem;

min-h-84min-height: 21rem;

min-h-85min-height: 21.25rem;

min-h-86min-height: 21.5rem;

min-h-87min-height: 21.75rem;

min-h-88min-height: 22rem;

min-h-89min-height: 22.25rem;

min-h-90min-height: 22.5rem;

min-h-91min-height: 22.75rem;

min-h-92min-height: 23rem;

min-h-93min-height: 23.25rem;

min-h-94min-height: 23.5rem;

min-h-95min-height: 23.75rem;

min-h-96min-height: 24rem;

min-h-97min-height: 24.25rem;

min-h-98min-height: 24.5rem;

min-h-99min-height: 24.75rem;

min-h-100min-height: 25rem;

min-h-automin-height: auto;

min-h-dvhmin-height: 100dvh;

min-h-dvwmin-height: 100dvw;

min-h-vhmin-height: 100vh;

min-h-vwmin-height: 100vw;

min-h-fcmin-height: fit-content;

min-h-fullmin-height: 100%;

min-h-halfmin-height: 50%;

min-h-maxmin-height: max-content;

min-h-minmin-height: min-content;

min-h-pxmin-height: 1px;

min-h-smin-height: stretch;

min-h-smmin-height: 40rem;

min-h-mdmin-height: 48rem;

min-h-lgmin-height: 64rem;

min-h-xlmin-height: 80rem;

min-h-xxlmin-height: 96rem;

The min-h-64 utility sets the minimum height to 8rem, ensuring that the element maintains at least this height even when the content is smaller.

Try changing the vertical size of the box to see how wide it can be at the maximum size.

<div class="ai-c bg-indigo d-f jc-c max-h-64 min-h-16 o-auto p-3 r-v c-white h-32">32</div>

Using Percentages

100%

50%

<div class="b-3 bs-d bc-indigo d-f h-64 p-2 cg-8 c-white">
  <div class="ai-c bg-indigo d-f h-full p-3">100%</div>
  <div class="ai-c bg-indigo d-f h-half p-3">50%</div>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Responsive design

Target different screen sizes by adding breakpoint prefixes. Styles apply from the specified breakpoint and up.

Target specific 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 variant

Apply styles conditionally when users hover over an element using the h: prefix.

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

Syntax:h:h-[value]

Height

Widely available

h-[value]118 utilities

Max Height

Widely available

max-[value]118 utilities

Min Height

Widely available

min-[value]118 utilities

Using Percentages

Using utility variants

Responsive design

Hover state variant