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>
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.