block-size utilities table reference
The block-size utilities in Tailwind CSS v4 are: block-<number> (block-size: calc(var(--spacing) * <number>)), block-<fraction> (block-size: calc(<fraction> * 100%)), block-auto (block-size: auto), block-px (block-size: 1px), block-full (block-size: 100%), block-screen (block-size: 100vh), block-dvh (block-size: 100dvh), block-dvw (block-size: 100dvw), block-lvh (block-size: 100lvh), block-lvw (block-size: 100lvw), block-svh (block-size: 100svh), block-svw (block-size: 100svw), block-min (block-size: min-content), block-max (block-size: max-content), block-fit (block-size: fit-content), block-lh (block-size: 1lh), block-(<custom-property>) (block-size: var(<custom-property>)), and block-[<value>] (block-size: <value>).
block-<number> utilities use spacing scale
The block-<number> utilities like block-24, block-32, block-40, block-48, block-64, block-80, and block-96 calculate their value using calc(var(--spacing) * <number>), meaning they are based on the spacing scale variable.
block-<fraction> utilities for percentage-based sizing
The block-<fraction> utilities like block-1/3, block-1/2, block-3/4, and block-9/10 calculate their value using calc(<fraction> * 100%), allowing percentage-based block sizing.
block-screen matches viewport block size at 100vh
The block-screen utility sets block-size to 100vh to make an element span the entire block size of the viewport.
Dynamic viewport height utilities block-dvh and block-dvw
The block-dvh utility sets block-size to 100dvh for dynamic viewport block height that changes as the browser UI expands or contracts. The block-dvw utility sets block-size to 100dvw for dynamic viewport width.
Large and small viewport height utilities block-lvh and block-svh
The block-lvh utility sets block-size to 100lvh for the largest possible viewport block size. The block-svh utility sets block-size to 100svh for the smallest possible viewport block size.
Arbitrary block-size values with bracket notation
The block-[<value>] utility allows setting arbitrary block-size values using bracket notation, where <value> can be any valid CSS value.
max-block-size utility class syntax patterns
Tailwind CSS v4 provides max-block-size utilities in the following patterns: max-block-<number> uses the spacing scale with calc(var(--spacing) * <number>); max-block-<fraction> uses percentages with calc(<fraction> * 100%); max-block-none sets max-block-size to none; max-block-px sets it to 1px; max-block-full sets it to 100%; max-block-screen sets it to 100vh; max-block-dvh, max-block-dvw, max-block-lvh, max-block-lvw, max-block-svh, and max-block-svw set it to their respective viewport units (100dvh, 100dvw, 100lvh, 100lvw, 100svh, 100svw); max-block-min, max-block-max, and max-block-fit set it to min-content, max-content, and fit-content respectively; max-block-lh sets it to 1lh; max-block-(<custom-property>) references a custom property with var(); and max-block-[<value>] accepts arbitrary values.
max-block-<number> utilities use spacing scale
The max-block-<number> utilities like max-block-24, max-block-32, max-block-40, max-block-48, max-block-64, and max-block-80 set maximum block size based on the spacing scale multiplied by the spacing unit variable.
max-block fraction utilities for percentage-based sizing
Fraction-based max-block utilities like max-block-1/2, max-block-2/5, max-block-3/4, and max-block-9/10 set the maximum block size as a percentage of the parent element's block size.
max-block-size utilities support responsive design
The max-block-size utilities support responsive design modifiers, allowing different maximum block sizes at different breakpoints.
max-block-size utilities are customizable via spacing scale
The max-block utilities can be customized by modifying the spacing scale in the theme configuration, similar to other spacing-based utilities.
max-block-size arbitrary value syntax
Use max-block-[<value>] syntax to apply arbitrary custom values to the max-block-size property, for example max-block-[220px].
max-block-size custom property reference syntax
Use max-block-(<custom-property>) syntax to reference custom CSS properties, which will be inserted as var(<custom-property>).
min-block-size utilities for spacing scale
The min-block-<number> utilities set minimum block size using the spacing scale. For example, min-block-24 and min-block-64 set the element to a fixed minimum block size based on the spacing scale with the CSS rule min-block-size: calc(var(--spacing) * <number>);
min-block-size utilities for fractions
The min-block-<fraction> utilities set minimum block size to a percentage of the parent element. For example, min-block-1/2, min-block-3/4, and min-block-9/10 use the CSS rule min-block-size: calc(<fraction> * 100%);
min-block-px utility
The min-block-px utility sets minimum block size to exactly 1 pixel using the CSS rule min-block-size: 1px;
min-block-full utility
The min-block-full utility sets minimum block size to 100% of the parent element using the CSS rule min-block-size: 100%;
min-block-screen utility
The min-block-screen utility sets minimum block size to 100 viewport heights using the CSS rule min-block-size: 100vh;
min-block viewport height utilities
Tailwind provides min-block-dvh, min-block-lvh, and min-block-svh utilities for dynamic, large, and small viewport heights respectively. min-block-dvh uses min-block-size: 100dvh;, min-block-lvh uses min-block-size: 100lvh;, and min-block-svh uses min-block-size: 100svh;
min-block viewport width utilities
Tailwind provides min-block-dvw and min-block-svw utilities for dynamic and small viewport widths respectively. min-block-dvw uses min-block-size: 100dvw; and min-block-svw uses min-block-size: 100svw;
min-block-lvw utility
The min-block-lvw utility sets minimum block size to 100 large viewport widths using the CSS rule min-block-size: 100lvw;
min-block-auto utility
The min-block-auto utility sets minimum block size to auto using the CSS rule min-block-size: auto;
min-block content sizing utilities
Tailwind provides min-block-min, min-block-max, and min-block-fit utilities for content-based sizing. min-block-min uses min-block-size: min-content;, min-block-max uses min-block-size: max-content;, and min-block-fit uses min-block-size: fit-content;
min-block-lh utility
The min-block-lh utility sets minimum block size to 1 line height using the CSS rule min-block-size: 1lh;
min-block custom property utility
The min-block-(<custom-property>) utility references a custom CSS property using the CSS rule min-block-size: var(<custom-property>);
min-block arbitrary value utility
The min-block-[<value>] utility allows setting arbitrary CSS values using the CSS rule min-block-size: <value>;