max-h utilities with spacing scale
The max-h-<number> utilities set maximum height using the spacing scale via calc(var(--spacing) * <number>). Examples include max-h-24, max-h-40, max-h-48, max-h-64, and max-h-80.
Tailwind CSS v4 · all subjects
utilities/max-height
8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
max-h utilities with fractions
The max-h-<fraction> utilities set maximum height as a percentage using calc(<fraction> * 100%). Examples include max-h-1/4, max-h-1/2, max-h-3/4, and max-h-9/10.
max-h fixed value utilities
Fixed maximum height utilities include: max-h-none (max-height: none), max-h-px (max-height: 1px), max-h-full (max-height: 100%), max-h-min (max-height: min-content), max-h-max (max-height: max-content), and max-h-fit (max-height: fit-content).
max-h viewport units utilities
Maximum height utilities using dynamic viewport units include: max-h-screen (max-height: 100vh), max-h-dvh (max-height: 100dvh), max-h-dvw (max-height: 100dvw), max-h-lvh (max-height: 100lvh), max-h-lvw (max-height: 100lvw), max-h-svh (max-height: 100svh), and max-h-svw (max-height: 100svw).
max-h line height unit utility
The max-h-lh utility sets maximum height to 1lh (one line height unit).
max-h custom property and arbitrary values
Maximum height can be set using custom CSS properties with max-h-(<custom-property>) or arbitrary values with max-h-[<value>]. The custom property syntax uses max-height: var(<custom-property>) and arbitrary values use max-height: <value>.
max-h utilities are responsive
Maximum height utilities support responsive design modifiers for applying different max-height values at different breakpoints.
max-h utilities can be customized via spacing scale
The maximum height utilities are customizable through the spacing scale configuration, allowing users to add, modify, or remove max-h values.