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.

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

Preview

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:

<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

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:

// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			minHeight: {
				section: "20rem",
				content: "65vh",
				"screen-75": "75vh",
			},
		},
	},
};

<section class="min-h-section bg-white shadow">
	Custom min-height section
</section>

Preview

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

🧩 Real UI Component Examples

📄 Full-Height Login Page

<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

📦 Sticky Sidebar Layout

<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

<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

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

✨ What's Next?

• Tailwind max height

Windframe Tailwind blocks

Pricing