new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS v4 · all subjects

utilities/height

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Height utility classes with number values

The h-<number> utilities set height using the spacing scale with the formula height: calc(var(--spacing) * <number>). Examples include h-24, h-32, h-40, h-48, h-64, h-80, and h-96.

Height utility classes with fraction values

The h-<fraction> utilities set height as a percentage of the parent element using the formula height: calc(<fraction> * 100%). Examples include h-1/3, h-1/2, h-3/4, and h-9/10.

Height utility keywords

Height utilities include h-auto (height: auto), h-px (height: 1px), h-full (height: 100%), h-min (height: min-content), h-max (height: max-content), h-fit (height: fit-content), and h-lh (height: 1lh).

Height viewport units

Height utilities support multiple viewport unit values: h-screen (height: 100vh), h-dvh (height: 100dvh for dynamic viewport height), h-dvw (height: 100dvw for dynamic viewport width), h-lvh (height: 100lvh for large viewport height), h-lvw (height: 100lvw for large viewport width), h-svh (height: 100svh for small viewport height), and h-svw (height: 100svw for small viewport width).

Height with custom property and arbitrary values

Height utilities support h-(<custom-property>) which applies height: var(<custom-property>), and h-[<value>] which applies height: <value> for arbitrary custom values.

Size utility classes for width and height

The size-* utilities set both width and height simultaneously. size-<number> applies width: calc(var(--spacing) * <number>) and height: calc(var(--spacing) * <number>). size-<fraction> applies width: calc(<fraction> * 100%) and height: calc(<fraction> * 100%). Keyword variants include size-auto, size-px, size-full, size-min, size-max, and size-fit.

Size with custom property and arbitrary values

Size utilities support size-(<custom-property>) which applies width: var(<custom-property>) and height: var(<custom-property>), and size-[<value>] which applies width: <value> and height: <value> for arbitrary custom values.

Dynamic viewport height use case

Use the h-dvh utility to make an element span the entire height of the viewport when the browser UI expands or contracts, accounting for dynamic viewport changes.

Large viewport height use case

Use the h-lvh utility to set an element's height to the largest possible height of the viewport, useful when the viewport height changes.

Small viewport height use case

Use the h-svh utility to set an element's height to the smallest possible height of the viewport, useful for responsive designs that account for viewport height changes.

Height utilities are customizable via spacing scale

Height utilities h and size can be customized by modifying the spacing scale in the theme configuration.

Give your agent this brain