Tailwind Min Height

Ever built a card component that looks perfect until someone adds three words of text and it collapses into an awkward mess? That's where min-height saves the day. I'm going to show you exactly how Tailwind's min-height utilities work, when to use them, and how to avoid the common mistakes that trip up most developers.

How to Set Tailwind Min-Height

Tailwind gives you min-h-{size} classes that set a floor for how short an element can be. Here's what you need to know:

• min-h-0 - Sets minimum height to zero (useful for resetting default browser styles)
• min-h-full - Makes the element at least 100% of its parent's height
• min-h-screen - Takes up the full viewport height (100vh)
• min-h-{number}- Uses Tailwind's spacing scale (like min-h-64 for 16rem)

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

Preview

The element will grow if you add more content, but it'll never get shorter than 64 pixels. That's the key difference between height and min-height, one's rigid, the other's flexible.

Making Elements Fill Their Parents

Want a div to match its parent's height? Use min-h-full. I use this constantly for sidebar layouts and card grids.

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

Pro tip: min-h-full only works if the parent has a defined height. If your parent uses height: auto, this won't do anything. Check the official Tailwind documentation for more details on how percentage-based heights work.

Responsive Min-Height

Here's where things get interesting. You can change min-height at different screen sizes by adding breakpoint prefixes:

<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

I've found this incredibly useful for hero sections. Give them lots of breathing room on desktop, but don't waste precious mobile real estate. The breakpoints work exactly like other Tailwind utilities like sm:, md:, lg:, xl:, and 2xl:. Stack them to create sophisticated responsive layouts without writing a single media query.

Arbitrary Value Usage

Sometimes you need exact pixel values or viewport units. Tailwind's v3+ lets you write arbitrary values in square brackets:

<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

I use clamp() for sections that need to scale smoothly across devices. It's one of those CSS functions that looks complex but solves real problems. Learn more about CSS clamp() on MDN.

Warning: Don't go overboard with arbitrary values. If you're using min-h-[347px] in five different places, you should probably add a custom token to your config instead.

Customization in tailwind.config.js

When you keep reaching for the same min-height values, add them to your tailwind.config.js:

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

Now you can write min-h-hero instead of min-h-[32rem] everywhere. Your team will thank you. Semantic class names make code way easier to scan. This approach works great for design systems. You can typically create tokens like min-h-header, min-h-modal, and min-h-card that match your Figma components.

State Variants: Hover, Focus, and More

You can change min-height based on user interaction. This is perfect for expanding cards, growing input fields, or interactive panels:

<!-- Grows on hover -->
<div class="min-h-48 hover:min-h-64 transition-all duration-300">
  Hover to expand
</div>

<!-- Changes when focused -->
<textarea class="min-h-32 focus:min-h-48">
  Click to expand
</textarea>

<!-- Combination of states -->
<div class="min-h-40 hover:min-h-56 focus-within:min-h-64">
  Multiple triggers
</div>

Preview

Add transition-all duration-300 to make the change smooth instead of jarring. Users appreciate the polish. You can read more about state variants in Tailwind's documentation.

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

The min-h-screen class ensures the section fills the viewport, and flexbox handles the centering. Works perfectly on every device.

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

Combine min-h-screen with fixed positioning, and you've got a sidebar that stays visible during scroll.

Article Container with Sticky Footer

<div class="flex flex-col min-h-screen">
	<main class="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

The magic happens with grow (which is shorthand for flex-grow: 1). It tells the main content to expand and fill any available space, pushing the footer down.

Common Mistakes (And How to Avoid Them)

Mistake 1: Forgetting the parent height min-h-full needs a parent with a defined height. If it's not working, check your parent elements.

Mistake 2: Using min-h-screen on mobile without testing Always test on real devices. The old min-h-screen can cause scrolling issues. Use min-h-dvh for better mobile support.

Mistake 3: Fighting the cascade If min-h-48 isn't working, something else might be overriding it. Use browser DevTools to inspect computed styles. You might need to add !min-h-48 to force it (but this should be rare).

Mistake 4: Overusing arbitrary values

If you write min-h-[427px] in three different files, you should extract it to your config as min-h-card or similar. Future you will thank present you.

Mistake 5: Not combining with overflow utilities

When you set a min-height, make sure to handle overflow. Add overflow-y-auto if content might exceed the height.

Debugging Tips I Wish Someone Told Me

Visual debugging with borders

Add temporary borders to see what's happening:

<div class="min-h-full border-4 border-red-500">
  Now you can see if it's filling the space
</div>

Use browser DevTools computed styles Right-click your element → Inspect → Computed tab. Look for min-height to see what's actually applied.

Check parent heights systematically Start at your element and work up the tree. Any parent with height: auto breaks percentage-based min-heights.

Test responsive breakpoints

Use DevTools device toolbar (Ctrl+Shift+M or Cmd+Shift+M) to test different screen sizes quickly.

Tailwind Min-height Table

What's Next?

• Tailwind max height

Windframe Tailwind blocks

Pricing