Check out our free templates made with AI and polished to perfection in Windframe

Get now
Last updated: 15 April 2025

Tailwind CSS Min-Height

The min-height utility class in Tailwind CSS allows you to control the minimum height of elements.


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.

How to Set Tailwind 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.

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

Preview

This div has a minimum height of 64 pixels


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:

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

Preview

This div has a minimum height of 100% of its parent container.

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:

html
<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>

Preview

This div has a minimum height of 64 pixels by default, and 48 pixels starting from the medium breakpoint.

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.

✏️ Arbitrary Value Usage

You can use arbitrary values when you need something precise or fluid:

html
<div class="min-h-[300px]">300px minimum height</div>
<div class="min-h-[70vh]">70% of viewport height</div>
<div class="min-h-[clamp(200px,50vh,500px)]">Responsive min-height</div>

Preview

300px minimum height
70% of viewport height

Responsive min-height

Great for Figma-perfect layouts or dynamic content zones.

⚙️ Customization in tailwind.config.js

Extend the default height scale to add custom min-height utilities:

js
// tailwind.config.js
module.exports = {
theme: {
extend: {
minHeight: {
section: "20rem",
content: "65vh",
"screen-75": "75vh",
},
},
},
};
html
<section class="min-h-section bg-white shadow">
Custom min-height section
</section>

Preview

Custom min-height section

This is helpful for tokens like min-h-header, min-h-hero, etc.

🧩 Real UI Component Examples

📄 Full-Height Login Page

html
<section class="flex min-h-screen items-center justify-center bg-gray-50">
<form class="w-full max-w-sm rounded bg-white p-8 shadow">
<h2 class="mb-6 text-2xl font-semibold">Login</h2>
<div class="flex-col items-center justify-between space-y-6">
<label class="">Username</label>
<input
class="p-2 ml-3 border border-gray-500 focus:border-green-500"
type="text"
placeholder="Enter Username"
/>
<label class="text-gray-700">Password</label>
<input
class="p-2 ml-4 border border-gray-500 focus:border-green-500"
type="password"
placeholder="********"
/>
</div>
</form>
</section>

Preview

Login

📦 Sticky Sidebar Layout

html
<aside class="min-h-screen w-64 bg-gray-900 text-white p-6 fixed top-0 left-0">
<nav>
<ul>
<li><a href="#" class="block py-2">Dashboard</a></li>
<!-- More links -->
</ul>
</nav>
</aside>

Preview

📰 Article Container with Sticky Footer

html
<div class="flex flex-col min-h-screen">
<main class="flex-grow p-8 bg-white">Long-form content goes here</main>
<footer class="bg-gray-100 p-4 text-center">
Footer stays at the bottom
</footer>
</div>

Preview

Long-form content goes here

built with love @2025

Using min-h-screen ensures the footer is pushed down even with little content.

✅ Best Practices for Devs & Designers

  • Use min-h-screen to anchor full-page sections (landing pages, dashboards).

  • Combine min-h-* with flex, grid, or h-auto for reliable vertical layouts.

  • Add custom tokens (min-h-hero, min-h-content) to improve readability and consistency across teams.

Don't set arbitrary min-h-* values unless you're solving a real design problem (like keeping modals or panels balanced).

♿ Accessibility Notes

  • Ensure scrollable areas with min-height and overflow-auto are keyboard accessible.

  • Don't trap content in a min-height that hides important interactive elements.

  • If using min-h-screen, make sure focusable elements are reachable without requiring scrolling past large empty space.

Tailwind Min-height Table

ClassProperties
min-h-0 min-height: 0px;
min-h-fullmin-height: 100%;
min-h-screenmin-height: 100vh;

✨ What's Next?

Windframe Tailwind blocks

Pricing

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates