Last updated: 27 August 2025

Tailwind CSS Max-Height

Tailwind max-height utility class allows you to control the maximum height of elements. To set the Tailwind maximum height of an element, you can use the max-h-{size} class


Tailwind Max Height

Tailwind max-height limits how tall an element can grow. The element can still shrink if the content is smaller, but it won’t stretch past the maximum you set. This is convenient for things like modals, chat windows, dropdowns, or any scrollable box.

Syntax in Tailwind

Tailwind gives you a set of utilities for common max-height values such as

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

  • max-h-screen: This sets the maximum height to the full height of the viewport.

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

  • max-h-0: This sets the maximum height to 0, effectively hiding the element.

Each class is max-h-{value}. Values come from Tailwind’s spacing scale plus special keywords like screen (full viewport height).

Here’s what that looks like in practice.

html
<div class="h-96">
<div class="max-h-80">max-h-80</div>
<div class="max-h-40">max-h-80</div>
<div class="max-h-24">max-h-24</div>
</div>

Preview

max-h-80
max-h-40
max-h-24

Fixed Limit

Percentage Limit

Tailwind CSS also provides utility classes for setting maximum height as a percentage of the parent container's height. You can use the max-h-full or max-h-screen class to achieve this.

html
<div class="h-96">
<div class="max-h-full"></div>
<div class="max-h-screen"></div>
</div>

Preview

max-h-full
max-h-screen

Responsive Tailwind Max Height

To use responsive max-height classes, you can append the breakpoint prefix to the max-height classes. For example, md:max-h-48 sets the maximum height to 48 pixels starting from the medium breakpoint and above.

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

Preview

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

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

Arbitrary Value Usage

The arbitrary values gives you sizes that are not in the default scame to use to achieve precise pixel or fluid layout.

html
<div class="max-h-[320px]">320px max height</div>
<div class="max-h-[75vh]">75% of viewport height</div>
<div class="max-h-[clamp(200px,50vh,600px)]">Responsive cap</div>

Great for matching Figma specs or building components that resize based on the viewport.

Customization in tailwind.config.js

Extend the theme if you want project-specific max-height values:

js
// tailwind.config.js
module.exports = {
theme: {
extend: {
maxHeight: {
section: "28rem",
modal: "80vh",
"half-screen": "50vh",
},
},
},
};
html
<div class="max-h-section overflow-auto bg-yellow-500...">
Custom height for a content block
</div>

Preview

Custom height for a content block

This is ideal for design systems where spacing and layout need consistency.

Real UI Component Examples

📨 Scrollable Notification Panel

html
<div class="max-h-96 overflow-y-auto bg-white shadow rounded p-4">
<h2 class="text-lg font-bold mb-3">Notifications</h2>
<ul>
<li class="mb-2">New message from Alex</li>
<li class="mb-2">Server restarted</li>
<!-- Repeat for effect -->
</ul>
</div>

Preview

Notifications

  • New message from Alex

  • Server restarted

📄 Modal with Content Cap

html
<div
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"
>
<div
class="bg-white p-6 rounded-lg max-h-[80vh] overflow-y-auto w-full max-w-md"
>
<h3 class="text-xl font-semibold mb-4">Modal Title</h3>
<p class="mb-2">Long content inside modal body...</p>
<!-- Content continues -->
</div>
</div>

Preview

Modal Title

Long content inside modal body...

Best practices

  • Use overflow-y-auto with max-height so extra content scrolls instead of breaking layouts.

  • Prefer relative units (%, screen) when sizing flexible components.

  • For transitions, pair max-h-* with overflow-hidden and transition-all to create smooth expand/collapse effects.

Tailwind Max Height Classes

ClassProperties
max-h-0 max-height: 0px;
max-h-0.5 max-height: 0.125rem;
max-h-1max-height: 0.25rem;
max-h-1.5max-height: 0.375rem;
max-h-2max-height: 0.5rem;
max-h-2.5max-height: 0.625rem;
max-h-3max-height: 0.75rem;
max-h-3.5max-height: 0.875rem;
max-h-4max-height: 1rem;
max-h-5max-height: 1.25rem;
max-h-6max-height: 1.5rem;
max-h-7max-height: 1.75rem;
max-h-8max-height: 2rem;
max-h-9max-height: 2.25rem;
max-h-10max-height: 2.5rem;
max-h-11max-height: 2.75rem;
max-h-12max-height: 3rem;
max-h-14max-height: 3.5rem;
max-h-16max-height: 4rem;
max-h-20max-height: 5rem;
max-h-24max-height: 6rem;
max-h-28max-height: 7rem;
max-h-32max-height: 8rem;
max-h-36max-height: 9rem;
max-h-40max-height: 10rem;
max-h-44max-height: 11rem;
max-h-48 max-height: 12rem;
max-h-52max-height: 13rem;
max-h-56max-height: 14rem;
max-h-60max-height: 15rem;
max-h-64max-height: 16rem;
max-h-72max-height: 18rem;
max-h-80max-height: 20rem;
max-h-96max-height: 24rem;
max-h-px max-height: 1px;
max-h-full max-height: 100%;
max-h-screenmax-height: 100vh;

✨ What's Next?

Now that you’ve mastered Tailwind Max Height, try experimenting with:

Windframe Tailwind blocks

Pricing

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates