Check out our free templates made with AI and polished to perfection in Windframe
Get nowTailwind 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.
<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:
<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:
<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:
<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
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:
// tailwind.config.jsmodule.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
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
<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-*
withflex
,grid
, orh-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
andoverflow-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
Class | Properties |
---|---|
min-h-0 | min-height: 0px; |
min-h-full | min-height: 100%; |
min-h-screen | min-height: 100vh; |
✨ What's Next?
Windframe Tailwind blocks
Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs
Start building stunning tailwind UIs!
