Height utilities in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Tailwind CSS class h-8 do?

It sets the element's height to 2rem (32px by default). Tailwind uses a spacing scale where 8 equals 2rem.

beginner

How do you make an element take the full height of its parent using Tailwind?

Use the class h-full. It sets the height to 100% of the parent element's height.

intermediate

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

h-screen sets height to 100% of the viewport height (the visible browser window). h-full sets height to 100% of the parent element's height.

intermediate

How can you set a custom height like 500px in Tailwind?

Use the arbitrary value syntax: h-[500px]. This sets the height exactly to 500 pixels.

beginner

What Tailwind class sets the height to auto, letting content decide the height?

The class h-auto sets height to auto, so the element grows or shrinks based on its content.

Which Tailwind class sets an element's height to 100% of the viewport height?

A h-100

B h-full

C h-auto

D h-screen

h-screen sets height to 100vh, which is the viewport height.

What does h-0 do in Tailwind?

A Sets height to 100%

B Sets height to 1rem

C Sets height to 0 pixels

D Sets height to auto

h-0 sets the height to zero, making the element have no height.

How do you set an element's height to 50% of its parent in Tailwind?

A h-1/4

B h-1/2

C h-50

D h-full

h-1/2 sets height to 50% of the parent element.

Which class sets height to 'auto' in Tailwind?

A h-auto

B h-full

C h-screen

D h-fit

h-auto lets the height adjust based on content size.

How can you specify a height of exactly 300 pixels in Tailwind?

A h-[300px]

B h-300

C h-3

D h-auto

Use square brackets for arbitrary values like h-[300px].

Explain how to use Tailwind height utilities to make an element fill the entire viewport height and also how to set a custom pixel height.

Think about viewport vs parent and how Tailwind uses brackets for custom sizes.

Describe the difference between h-full and h-auto in Tailwind CSS and when you might use each.

Consider fixed height vs content-driven height.