Tailwind CSS Height Tutorial for Beginners

Height plays an important role in layout design. Whether you are building hero sections, cards, full-page layouts, or image containers — controlling height properly helps create a clean and balanced UI.

In this tutorial, you will learn:

How to set fixed height
How to use percentage-based height
How to use full-screen height
What is dynamic viewport height
How to use size utilities
How to apply responsive height

Let’s begin step by step.

What is Height in CSS?

Height defines how tall an element should be.

Traditional CSS:

height: 300px;

In Tailwind CSS, you use utility classes directly inside your HTML.

Example:

<div class="h-64"></div>

This approach keeps your code simple and scalable.

Setting Fixed Height Using Spacing Scale

Tailwind provides height values based on its spacing system.

Syntax:

h-<number>

Example using CDN:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-10">

  <div class="h-64 bg-blue-500 text-white flex items-center justify-center mb-4">
    h-64
  </div>

  <div class="h-40 bg-green-500 text-white flex items-center justify-center">
    h-40
  </div>

</body>
</html>

Here:

h-40 = 10rem
h-64 = 16rem

These values follow Tailwind’s spacing scale.

Using Percentage-Based Height

You can also define height using fractions.

Examples:

h-1/2
h-1/3
h-3/4
h-full

Example:

<div class="h-96 bg-gray-300">
  <div class="h-1/2 bg-indigo-500 text-white flex items-center justify-center">
    h-1/2
  </div>
</div>

Important: Percentage height works only when the parent element has a defined height.

Understanding h-full

h-full means:

height: 100%;

It makes the element take the full height of its parent.

Example:

<div class="h-80 bg-gray-200">
  <div class="h-full bg-purple-500 text-white flex items-center justify-center">
    h-full
  </div>
</div>

Full Screen Height (h-screen)

If you want an element to take the full height of the viewport, use:

h-screen

Example:

<div class="h-screen bg-blue-600 text-white flex items-center justify-center">
  Full Screen Section
</div>

This is commonly used for hero sections.

Dynamic Viewport Height (h-dvh)

On mobile devices, browser UI (address bar) can expand or shrink. To handle that properly, Tailwind provides:

h-dvh (dynamic viewport height)
h-lvh (largest viewport height)
h-svh (smallest viewport height)

Example:

<div class="h-dvh bg-teal-600 text-white flex items-center justify-center">
  Dynamic Viewport Height
</div>

This ensures better mobile layout behavior.

Using min-content, max-content, and fit-content

Tailwind provides:

h-min
h-max
h-fit

Example:

<div class="h-fit bg-gray-800 text-white p-6">
  Height adjusts to content
</div>

These utilities are useful in flexible layouts.

Setting Both Width and Height Together (size Utility)

Instead of writing separate width and height classes, you can use:

size-<number>

Example:

<div class="size-24 bg-indigo-500 text-white flex items-center justify-center">
  size-24
</div>

This sets:

width
height

to the same value.

Other examples:

size-16
size-32
size-full

Example:

<div class="size-full bg-green-500"></div>

This sets both width and height to 100%.

Custom Height Values

If predefined values are not enough, you can define custom values.

Example:

<div class="h-[300px] bg-gray-900 text-white flex items-center justify-center">
  Custom Height 300px
</div>

You can also use CSS variables:

<div class="h-(--my-height)">
  Custom height using CSS variable
</div>

This is useful in advanced UI systems.

Responsive Height in Tailwind CSS

Tailwind follows a mobile-first approach.

Example:

<div class="h-40 md:h-64 lg:h-96 bg-pink-600 text-white flex items-center justify-center">
  Responsive Height
</div>

Explanation:

Mobile → h-40
Medium screens → h-64
Large screens → h-96

This is useful for responsive cards and sections.

Best Practices for Beginners

If you are learning Tailwind CSS:

Use h-screen for hero sections
Use h-full only when parent has defined height
Prefer responsive height instead of fixed height
Use size utility for square elements
Test layouts on mobile devices

Frequently Asked Questions (FAQ)

What does h-full mean in Tailwind CSS?

h-full means height: 100% of the parent element.

What is the difference between h-full and h-screen?

h-full = 100% of parent h-screen = 100% of viewport height

Why is my h-1/2 not working?

Percentage height works only if the parent has a defined height.

How do I create a full-screen hero section?

Use:

<div class="h-screen flex items-center justify-center">
  Hero Section
</div>

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Tailwind CSS Width Tutorial for Beginners

Next: Tailwind CSS Border Style Tutorial for Beginners

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us