Height

Use height utilities to set an element’s height using the spacing scale, fractional percentages, or viewport units. Tailwind v4 ships numeric (h-<number>), fractional (h-1/2, h-2/3, …), and viewport (h-screen, h-svh/h-lvh/h-dvh) variants on a single resolver — symmetrical with the w-* family.

Basic example

Use h-<number> utilities like h-24 and h-64 to set an element to a fixed height based on the spacing scale.

Style('h-96 ...', child: Text('h-96'))
Style('h-80 ...', child: Text('h-80'))
Style('h-64 ...', child: Text('h-64'))
Style('h-48 ...', child: Text('h-48'))
Style('h-40 ...', child: Text('h-40'))
Style('h-32 ...', child: Text('h-32'))
Style('h-24 ...', child: Text('h-24'))

Using a percentage

Use h-full or h-<fraction> utilities like h-1/2 and h-2/3 to give an element a percentage-based height. Fractions render via Flutter’s FractionallySizedBox against the parent’s available height.

Style('h-full ...', child: Text('h-full'))
Style('h-9/10 ...', child: Text('h-9/10'))
Style('h-3/4 ...', child: Text('h-3/4'))
Style('h-1/2 ...', child: Text('h-1/2'))
Style('h-1/3 ...', child: Text('h-1/3'))

Setting both width and height

The size-* utilities set both width and height in a single class. The visual demo lives under width sizing — see width / Setting both width and height (route /width-size) for an example.

Style('size-16', child: /* 64×64 box */)
Style('size-1/2', child: /* 50% × 50% of parent */)

Matching the viewport

Use the h-screen utility to make an element span the entire height of the viewport:

Style('h-screen', child: /* ... */)

Tailwind v4 also documents h-dvh, h-lvh, and h-svh to demonstrate dynamic / large / small viewport heights — these only differ in browsers under varying URL-bar / overscroll states. In Flutter all four (h-screen, h-dvh, h-lvh, h-svh) collapse to a single MediaQuery.sizeOf(context).height read at render time. There is no dynamic-viewport distinction.

Resetting the height

Use the h-auto utility to remove an element’s assigned height under a specific condition, like at a particular breakpoint:

Style('h-screen md:h-auto', child: /* ... */)

Using a custom value

Use bracket syntax for arbitrary values: h-[32rem], h-[200px]. Unit suffixes (px, rem, em) are stripped — Flutter uses logical pixels.

Style('h-[32rem]', child: /* ... */)

Class reference

Class	Value
h-<number>	spacing scale × <number> (e.g. h-4 = 16px)
h-<fraction>	<fraction> × parent height (e.g. h-1/2 = 50%)
h-auto	no constraint
h-px	1px
h-full	100% (infinity)
h-screen	viewport height (MediaQuery.sizeOf(context).height)
h-dvh / h-lvh / h-svh	viewport height (collapsed; Flutter has no dynamic-viewport distinction)
h-[<value>]	arbitrary value (units stripped)

size-<n> mirrors the full surface and applies the same value to both width and height (see the width docs).

h-(<custom-property>) is resolved against theme-defined StyleThemeData.customProperties — e.g. h-(--my-height) behaves like h-[200px] when the theme defines --my-height: '200px'. Cascade-inherited or JS-set CSS variables remain out of scope.

Parity omissions

• h-min / h-max / h-fit — content-based sizing. Maps to Flutter’s IntrinsicHeight. Tracked for a future PR — playground pages must avoid IntrinsicHeight for performance, but the library can expose them when a docs page exercises them.
• h-lh — line-height-based sizing. Tracked for a future PR.
• Dynamic-viewport distinction (h-dvh vs h-lvh vs h-svh vs h-screen) — Flutter has no equivalent of browser URL-bar / overscroll states, so all four collapse to a single value.