Tailwind CSS Course
Tailwind CSS
/
Beginner

Height

Definition

Utilities for setting the height of an element, including fixed heights, percentage heights, and viewport heights.

Explain Like I'm New

How tall something is. Just like width, you can use the spacing scale (`h-16`), percentages (`h-full`), or viewport units (`h-screen`).

Real World Example

Creating a 'Hero Image' at the top of a landing page that perfectly takes up the entire vertical space of the user's monitor using `h-screen`.

Common Use Cases

  • •Hero sections
  • •Full-page layouts
  • •Sizing icons

Interactive Example

 Interview Questions
basic
  • If you apply `h-full` to a child, but the parent `div` doesn't have a defined height, what happens?
intermediate
  • What modern Tailwind class accounts for the mobile browser address bar popping in and out?
Flash Cards
Question
Parent has no height?
Click to reveal answer
Answer
`h-full` will do nothing. Percentage heights ONLY work if the parent has an explicitly defined height.
Question
Mobile address bar?
Click to reveal answer
Answer
`h-dvh` (Dynamic Viewport Height). It automatically resizes the height when the mobile Safari/Chrome address bar expands or shrinks.