Setting element heights is one of those things you do constantly when building interfaces. Maybe you need a fixed-height card, a full-screen hero section, or a flexible container that adapts to its content.

I've been using Tailwind CSS for years and the height utilities make all of this ridiculously simple. No more writing custom CSS for every height scenario – just grab the right utility class and you're done.

Let me walk you through everything you need to know about controlling heights in Tailwind CSS.

Fixed heights using spacing scale

When you need precise control over an element's height, the spacing scale utilities are your go-to option. These classes follow the pattern h-<number> and map directly to Tailwind's spacing system.

The spacing scale works in 4px increments. So h-4 gives you 16px, h-8 gives you 32px, and so on. You can go all the way up to h-96 which is 384px.

Here's what different height values look like in action:

These fixed heights work great for things like buttons, cards, image containers, or any component where you want consistent sizing. The beauty is that they're predictable and based on a system, not random pixel values.

There's also h-px which gives you exactly 1 pixel – super useful for dividers or thin decorative elements.

Fractional and full heights

Percentage-based heights are where things get interesting. You can use fractions like h-1/2, h-1/3, h-2/3, or just h-full for 100% height.

But here's the thing. These values are relative to the parent container. If your parent doesn't have a defined height, these classes won't do much.

See how the parent container has h-64? That's what lets the child elements calculate their fractional heights properly. Without it, those fractions have nothing to work with.

This approach is perfect for split layouts, sidebars, or any design where you want proportional divisions of space. The h-full class is especially handy when you want something to stretch and fill its parent completely.

Viewport-based heights

Now we're talking about making elements fill the entire browser window. Tailwind gives you several options here, and they each solve different problems.

The classic is h-screen which sets height to 100vh. Works great on desktop but has issues on mobile browsers where the address bar pops in and out.

That's where the newer viewport units come in:

• h-dvh - Dynamic viewport height (adjusts as browser UI changes)
• h-svh - Small viewport height (smallest possible)
• h-lvh - Large viewport height (largest possible)

For mobile-first development, I usually reach for h-dvh these days. It handles those annoying mobile browser UI changes smoothly without content jumping around.

Hero sections, landing pages, full-screen modals – these are all perfect candidates for viewport-based heights.

Auto and content-based heights

Sometimes you don't want to dictate the height at all. You want the content to determine it naturally. That's where these utilities shine.

h-auto is the default browser behavior – the element grows to fit its content. You'll use this mostly to override other height values in responsive designs.

Then you've got the content-sizing keywords:

• h-min - Shrinks to minimum content size
• h-max - Expands to maximum content size
• h-fit - Similar to max, fits the content

The difference between these can be subtle. h-min is useful when you want the tightest possible fit, while h-max works well for inline-block elements or flex items.

You'll find h-auto most useful in responsive scenarios. Like when you have a fixed height on desktop but want flexible height on mobile.

Using arbitrary height values

What happens when the predefined utilities don't cut it? You break out the square brackets and write exactly what you need.

Arbitrary values let you use any CSS value: h-[450px], h-[32rem], h-[75svh]. You're not limited to Tailwind's spacing scale anymore.

You can even reference CSS custom properties with parentheses: h-(--my-custom-height). This is powerful when you're working with dynamic values from JavaScript or theming systems.

Arbitrary values also work great with responsive design. Something like h-[300px] md:h-[500px] lg:h-[700px] gives you precise control at each breakpoint.

Just remember – use standard utilities when they exist. Arbitrary values are for those special cases where you need something specific that Tailwind doesn't provide out of the box.

That's it for this one! Height utilities in Tailwind CSS give you tons of flexibility without writing custom CSS. From fixed spacing scale values to viewport units to completely custom arbitrary values, you've got options for every scenario.

The key is knowing which tool to reach for. Fixed heights for consistent components, fractional heights for proportional layouts, viewport heights for full-screen elements, and arbitrary values when you need something unique.

I hope this helped clarify how to work with heights in Tailwind. Trust me, once you get comfortable with these utilities, you'll wonder how you ever built layouts without them.