Tailwind Max Height

The max-height utility class in Tailwind CSS allows you to control the maximum height of elements. It provides a set of classes that enable you to set the Tailwind max height to specific values, percentages, or use predefined max-height utilities for common use cases.

How to apply Tailwind Max Height

To set the Tailwind maximum height of an element, you can use the max-h-{size} class, where {size} can be one of the following options:

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

Here's an example of how to use the Tailwind max height utility classes:

<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

Percentage-based Tailwind Max Height

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-{percentage} class to achieve this. Here's an example:

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

Preview

Responsive Tailwind Max Height

Tailwind CSS allows you to control the maximum height of elements responsively at different breakpoints. 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. Here's an example:

<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

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

You can use arbitrary values for pixel precision or fluid layouts:

<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 maxHeight scale in your tailwind.config.js for custom layout tokens:

// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			maxHeight: {
				section: "28rem",
				modal: "80vh",
				"half-screen": "50vh",
			},
		},
	},
};

<div class="max-h-section overflow-auto bg-yellow-500...">
	Custom height for a content block
</div>

Preview

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

🧩 Real UI Component Examples

📨 Scrollable Notification Panel

<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

📄 Modal with Content Cap

<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

✅ Best Practices for Devs & Designers

• Use max-h- to prevent layout overflow—especially for modals, dropdowns, and scrollable panels.

• Combine with overflow-y-auto or overflow-hidden to control scroll behavior cleanly.

• Stick to design tokens (max-h-modal, max-h-sidebar) for consistency across projects.

• Avoid using both h-* and max-h-* together unless you're handling fallbacks or responsive ranges.

♿ Accessibility Notes

• If you're using scroll containers (overflow-y-auto), ensure keyboard focus and tab navigation are preserved.

• Avoid hiding important interactive elements behind capped heights—if content is hidden, make sure users can access it.

• For modals or dialogs with scroll areas, trap focus inside using libraries like @headlessui/react or react-focus-lock.

Tailwind Max Height Classes

✨ What's Next?

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

• Tailwind min height

Windframe Tailwind blocks

Pricing