h-<number> utility produces spacing-scaled height
The h-<number> utility class produces height: calc(var(--spacing) * <number>);, using the spacing scale to calculate the height value.
Tailwind CSS · Utilities reference · all subjects
height
26 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
h-<fraction> utility produces percentage-based height
The h-<fraction> utility class (like h-1/2, h-3/4, h-9/10) produces height: calc(<fraction> * 100%);, setting height as a percentage.
h-auto sets height to auto
The h-auto utility class produces height: auto;
h-px sets height to 1px
The h-px utility class produces height: 1px;
h-full sets height to 100%
The h-full utility class produces height: 100%;
h-screen sets height to 100vh
The h-screen utility class produces height: 100vh;, making an element span the entire height of the viewport.
h-dvh sets height to 100dvh for dynamic viewport height
The h-dvh utility class produces height: 100dvh;, making an element span the entire height of the viewport which changes as the browser UI expands or contracts.
h-lvh sets height to 100lvh for large viewport height
The h-lvh utility class produces height: 100lvh;, setting an element's height to the largest possible height of the viewport.
h-svh sets height to 100svh for small viewport height
The h-svh utility class produces height: 100svh;, setting an element's height to the smallest possible height of the viewport.
h-svw sets height to 100svw
The h-svw utility class produces height: 100svw;
h-min sets height to min-content
The h-min utility class produces height: min-content;
h-max sets height to max-content
The h-max utility class produces height: max-content;
h-fit sets height to fit-content
The h-fit utility class produces height: fit-content;
h-lh sets height to 1lh
The h-lh utility class produces height: 1lh;
h-(<custom-property>) references a custom CSS property
The h-(<custom-property>) utility class produces height: var(<custom-property>);, allowing you to use a custom CSS property for the height value.
h-[<value>] sets height to arbitrary value
The h-[<value>] utility class produces height: <value>;, allowing you to use an arbitrary value for height.
size-auto sets both width and height to auto
The size-auto utility class produces width: auto; height: auto;
size-px sets both width and height to 1px
The size-px utility class produces width: 1px; height: 1px;
size-full sets both width and height to 100%
The size-full utility class produces width: 100%; height: 100%;
size-dvh sets both width and height to 100dvh
The size-dvh utility class produces width: 100dvh; height: 100dvh;
size-lvh sets both width and height to 100lvh
The size-lvh utility class produces width: 100lvh; height: 100lvh;
size-svh sets both width and height to 100svh
The size-svh utility class produces width: 100svh; height: 100svh;
size-min sets both width and height to min-content
The size-min utility class produces width: min-content; height: min-content;
size-max sets both width and height to max-content
The size-max utility class produces width: max-content; height: max-content;
size-fit sets both width and height to fit-content
The size-fit utility class produces width: fit-content; height: fit-content;
size-[<value>] sets both width and height to arbitrary value
The size-[<value>] utility class produces width: <value>; height: <value>;, allowing you to use an arbitrary value for both width and height.