Tailwind CSS - Height

Tailwind CSS: Height

Tailwind CSS provides a comprehensive set of utility classes for controlling the height of an element. These utilities cover fixed sizes, percentages, and viewport-relative units, enabling precise control over your layout’s vertical dimensions.

Modern Development Workflow

While you can use the Tailwind Play CDN for quick demos, a professional workflow involves setting up Tailwind CSS with a package manager and build tool. This allows for customization, performance optimization, and is the standard for production applications.

# Standard project setup for Tailwind CSS
npm install -D tailwindcss
npx tailwindcss init
# Then configure tailwind.config.js and your CSS entry point.

Common Height Classes

Below is a curated list of Tailwind’s most frequently used height utility classes.

Class	CSS Properties
h-0 to h-96	height: 0px; to height: 24rem; /* 384px */
h-auto	height: auto;
h-px	height: 1px;
h-1/2, h-1/3, etc.	height: 50%;, height: 33.33...%;, etc.
h-full	height: 100%;
h-screen	height: 100vh;
h-svh, h-lvh, h-dvh	height: 100svh;, height: 100lvh;, height: 100dvh;
h-min	height: min-content;
h-max	height: max-content;
h-fit	height: fit-content;

Core Concepts Explained

• Fixed Heights (h-*): Use classes like h-16 (4rem or 64px) for elements with a predetermined, fixed height.
• Percentage Heights (h-1/2, h-full): These set the height relative to the element’s parent. For h-full to work, the parent element must have a defined height.
• Viewport Heights (h-screen): Sets the height relative to the viewport. h-screen makes an element as tall as the visible screen, perfect for hero sections or full-page layouts.
• Dynamic Viewport Heights (h-svh, h-lvh, h-dvh): These are modern units that solve layout problems on mobile browsers where UI elements like address bars can appear or disappear. h-svh (small) is the viewport height excluding such UI, h-lvh (large) includes it, and h-dvh (dynamic) adjusts in real-time.
• Content-Based Heights (h-min, h-max, h-fit): These size the element based on its content, useful for creating flexible components.

Practical Examples

Example 1: Fixed and Full Height

This example shows the difference between a fixed height and using h-full, which expands to fill its parent container.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed vs Full Height</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-gray-50">
  <h1 class="text-xl font-bold mb-4">Fixed vs. Full Height</h1>
  <!-- The parent container with a defined height -->
  <div class="h-64 bg-slate-200 p-4 flex justify-around items-center rounded-lg">
    <!-- Fixed height child -->
    <div class="h-32 w-32 bg-blue-500 text-white flex items-center justify-center rounded-md shadow">
      h-32
    </div>
    <!-- Full height child (takes 100% of parent's height) -->
    <div class="h-full w-32 bg-green-500 text-white flex items-center justify-center rounded-md shadow">
      h-full
    </div>
  </div>
</body>
</html>

Example 2: Screen Height and Arbitrary Values

Here, we create a hero section that fills the entire screen using h-screen. We also use an arbitrary value (h-[500px]) for a section that needs a specific, non-standard height.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Screen & Arbitrary Height</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white">
  <!-- Full-screen hero section -->
  <header class="h-screen bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
    <h1 class="text-5xl font-extrabold text-white">Welcome!</h1>
  </header>

  <!-- Section with a specific, arbitrary height -->
  <section class="h-[500px] bg-white p-8">
    <h2 class="text-3xl font-bold">Content Section</h2>
    <p class="mt-4 text-gray-700">This section has a height of exactly 500px, set with an arbitrary value.</p>
  </section>
</body>
</html>

Common Pitfalls & Debugging Tips

• h-full Isn’t Working?: This is the most common issue. An element with h-full needs a parent with a defined height (e.g., h-64, h-screen, or a fixed pixel height). If the parent’s height is auto, the child’s height: 100% will have no effect. Check the entire chain of parent elements.
• Responsive Heights: Remember to use responsive prefixes like md:h-screen to apply heights only at specific breakpoints. For example, a component might be full-height on mobile but have a fixed height on desktop.
• Inspect with DevTools: When a height utility isn’t behaving as expected, use your browser’s developer tools to inspect the element. Check the computed height value and look at its parent’s dimensions.