Check out our free templates made with AI and polished to perfection in Windframe

Get now
Last updated: 15 April 2025

Tailwind Height

Tailwind height utility provides a set of classes that enable you to set the height of an element to a specific value, percentages, or use predefined height utilities along with the default spacing scale.


Tailwind Height

The Tailwind height utility gives you direct control over how tall an element is—from fixed units to full-screen layouts and responsive scaling. It provides a set of classes that enable you to set the height of elements to specific values, percentages, or use predefined height utilities for common use cases. They're essential for layout structure, containers, media, and interactive components.

How to set Tailwind Height

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

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

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

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

  • h-auto: This sets the height to automatically adjust based on the content.

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

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

Preview

This div has a height of 64 pixels

Percentage-based Tailwind Height

Tailwind CSS also provides utility classes for setting height as a percentage of the parent container's height. You can use the h-{percentage} class to achieve this. Here's an example:

html
<div class="h-50...">
This div has a height of 50% of its parent container.
</div>

Preview

This div has a height of 50% of its parent container.

Responsive Tailwind Height

Tailwind CSS allows you to control the height of elements responsively at different breakpoints. To use responsive Tailwind height classes, you can append the breakpoint prefix to the height classes. For example, md:h-48 sets the height to 48 pixels starting from the medium breakpoint and above.

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

Preview

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

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

🎯 Interaction State Use (hover/focus)

Height can change on hover/focus using transitions for interactive effects.

Example: Expandable card on hover

html
<div class="h-40 hover:h-64 transition-all duration-300 overflow-hidden bg-white shadow rounded">
<p class="p-4">Hover to expand height</p>
</div>

Preview

Hover to expand height

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia et nam odit expedita perspiciatis laborum error accusamus, voluptas nulla a at culpa blanditiis vero assumenda, voluptatum ex fugit excepturi amet!

This is useful for cards, dropdowns, or menus. Just be careful with layout shift and transitions that affect user focus.

✏️ Arbitrary Value Usage

Use any valid CSS unit when you need precision beyond the scale:

html
<div class="h-[72px]">Exact height</div>
<div class="h-[35vh]">35% of viewport height</div>
<div class="h-[clamp(200px,50vh,600px)]">Fluid height</div>

Preview

Exact height
35% of viewport height
Fluid height

This is helpful when you're matching Figma specs or building dynamic/responsive layouts.

⚙️ Customization in tailwind.config.js

You can extend the height scale to match design tokens or custom layout needs:

js
// tailwind.config.js
module.exports = {
theme: {
extend: {
height: {
'header': '4.5rem',
'hero': '80vh',
'half': '50%',
},
},
},
};
html
<header class="h-header bg-gray-50 text-gray-700 flex justify-between items-center p-4 font-bold">
<a>Logo</a>
<ul class="flex gap-4 m-2">
<li>Home</li>
<li>Product</li>
<li>Contact</li>
</ul>
</header>
<section class="h-hero bg-gray-900 text-white flex justify-between items-center p-5 space-x-4">
<div class="text-center flex-col">
<h2 class="text-xl font-bold m-3">Running your business with AI faster</h2>
<p class="text-center p-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button class="text-center bg-white rounded-lg text-gray-800 p-3 cursor-pointer">Get Started</button>
</div>
</section>

Preview

Logo
  • Home
  • Product
  • Contact

Running your business with AI faster

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

🧩 Real UI Component Examples

📦 Scrollable Chat Panel

html
<div class="h-96 overflow-y-auto bg-white shadow-inner rounded p-4">
<p class="mb-2">Chat message 1</p>
<p class="mb-2">Chat message 2</p>
<!-- ... -->
</div>

Preview

Marian Anderson

online

Marian Anderson

online

📱 Responsive Hero Banner

html
<section class="h-screen flex items-center justify-center bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
<h1 class="text-4xl font-bold">Full-Screen Hero</h1>
</section>

Preview

Full-Screen Hero

🧭 Sticky Navbar

html
<header class="h-16 bg-white shadow-md fixed top-0 left-0 w-full z-50 flex justify-between items-center px-6">
<span class="font-semibold text-lg">App Logo</span>
<ul class="flex justify-between items-center gap-4">
<li>Home</li>
<li>Service</li>
<li>Contact</li>
</ul>
</header>

Preview

App Logo
  • Home
  • Service
  • Contact

🎨 Image with Aspect Ratio

html
<div class="h-64 overflow-hidden rounded">
<img src="/image.jpg" alt="Preview" class="h-full w-full object-cover" />
</div>

Preview

Preview

Use h-* with object-cover to fill containers cleanly.

✅ Best Practices for Devs & Designers

  • Use h-screen for full viewport layouts, but test on mobile (where 100vh may be buggy).

  • Combine h-full with flex containers for dynamic stretching.

  • Prefer min-h-* for content sections that should grow but not collapse.

  • Avoid setting fixed heights (h-64, h-[500px]) on text content unless scroll/overflow is handled.

  • Custom tokens (like h-header, h-nav) help with maintainable design systems.

♿ Accessibility Notes

  • Height itself doesn’t affect accessibility, but overflowing content must be handled properly.

  • Avoid hiding important content via h-0, overflow-hidden, or display: none unless it’s intentional and accessible (e.g., with ARIA controls).

  • Don’t animate height if it causes layout shift without accounting for keyboard or screen reader users.

Tailwind Height class Table

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

📏 Why Height Matters in Web Design

Controlling an element’s height is essential for:

  • Visual balance: Tall vs. short elements influence layout symmetry

  • Usability: Scrollable areas or fixed sections

  • Responsiveness: Making sure elements adapt across screen sizes

Design integrity: Maintaining consistent sizing for headers, images, and cards

📚 Keep Exploring

Windframe Tailwind blocks

blog

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