Tailwind Min Height

The min-height utility class in Tailwind CSS allows you to control the minimum height of elements. It provides a set of classes that enable you to set the minimum height to specific values, percentages, or use predefined min-height utilities for common use cases.

Setting Min-Height

To set the minimum height of an element, you can use the min-h-{size} class, where {size} can be one of the following options:

• min-h-{value}: This sets the minimum height to a specific value in pixels.

• min-h-screen: This sets the minimum height to the full height of the viewport.

• min-h-full: This sets the minimum height to 100% of the parent container.

• min-h-0: This sets the minimum height to 0, effectively hiding the element if there is no content.

<div class="min-h-64...">
  This div has a minimum height of 64 pixels.
</div>

Preview

Percentage-based Min-Height

Tailwind CSS also provides utility classes for setting minimum height as a percentage of the parent container's height. You can use the min-h-{percentage} class to achieve this. Here's an example:

<div class="min-h-full">
  This div has a minimum height of 100% of its parent container.
</div>

Preview

Responsive Min-Height

Tailwind CSS allows you to control the minimum height of elements responsively at different breakpoints. To use responsive min-height classes, you can append the breakpoint prefix to the min-height classes. For example, md:min-h-48 sets the minimum height to 48 pixels starting from the medium breakpoint and above. Here's an example:

<div class="min-h-64 md:min-h-48">
  This div has a minimum height of 64 pixels by default, and 48 pixels starting from the medium
  breakpoint.
</div>

In the above example, the min-h-64 class is applied by default, setting the minimum height to 64 pixels. However, starting from the medium breakpoint and above, the md:min-h-48 class is applied, changing the minimum height to 48 pixels.

Tailwind Min-height Table

Windframe Tailwind blocks

Pricing