Utilities for height, min-height and max-height properties.
Numerical heights
Using h-[number], you can control the height size of an element.
You can use numerical values which will be converted into a multiple of 0.25rem (can be changed in config → units) for consistent and precise sizing.
For example, "h-5" will give you a height of 1.25rem.
You can use Arbitrary values like "h-(16px)" or "h-(2em)" as well.
Learn more about Arbitrary Styling
Percentage heights
Using h-[precentage], you can control the height size of an element with percentage values.
You can use any percentage values such as "h-28%".
You can also use "h-full" instead of h-100% and "h-half" instead of h-50%.
Viewport
Using h-[precentage]vw or h-[precentage]vh, you can set the height size of an element to match the height of the viewport.
<!-- vw = viewport width -->
<div class="h-100vw">
...
</div>
<!-- vh = viewport height -->
<div class="h-100vh">
...
</div>
You can use any percentage values such as "h-36vw".
You can also use "h-fullvw" instead of h-100vw and "h-fullvh" instead of h-100vh.
Min Height
Using min-h-[number|percentage], you can control the minimum height of an element.
min-height overrides height if it is greater than height (e.g., min-h-32 overrides h-16).
You can use both numerical and percentage values such as "min-h-12" or "min-h-25%".
You can use Arbitrary values like "min-h-(16px)" or "min-h-(2em)" as well.
Learn more about Arbitrary Styling
Max Height
Using max-h-[number|percentage], you can control the maximum height of an element.
This element will be 12.5rem(h-50) tall, unless the max-height is lower, in which case it will be as tall as the max-height.
↑ h-50 ↓
You can use both numerical and percentage values such as "max-h-12" or "max-h-25%".
You can use Arbitrary values like "max-h-(16px)" or "max-h-(2em)" as well.
Learn more about Arbitrary Styling