max-w numeric utility format
max-w-<number> utilities use the spacing scale and apply max-width: calc(var(--spacing) * <number>). Examples include max-w-24, max-w-32, max-w-40, max-w-48, max-w-64, max-w-80, max-w-96.
Tailwind CSS v4 · all subjects
utilities/max-width
5 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-w fraction utility format
max-w-<fraction> utilities apply max-width: calc(<fraction> * 100%). Examples include max-w-1/3, max-w-1/2, max-w-3/4, max-w-9/10.
max-w container scale utilities
Named container scale utilities for max-width include: max-w-3xs (16rem / 256px), max-w-2xs (18rem / 288px), max-w-xs (20rem / 320px), max-w-sm (24rem / 384px), max-w-md (28rem / 448px), max-w-lg (32rem / 512px), max-w-xl (36rem / 576px), max-w-2xl (42rem / 672px), max-w-3xl (48rem / 768px), max-w-4xl (56rem / 896px), max-w-5xl (64rem / 1024px), max-w-6xl (72rem / 1152px), max-w-7xl (80rem / 1280px).
max-w fixed value utilities
max-width utilities for fixed values include: max-w-none (max-width: none), max-w-px (max-width: 1px), max-w-full (max-width: 100%), max-w-dvw (max-width: 100dvw), max-w-dvh (max-width: 100dvh), max-w-lvw (max-width: 100lvw), max-w-lvh (max-width: 100lvh), max-w-svw (max-width: 100svw), max-w-svh (max-width: 100svh), max-w-screen (max-width: 100vw), max-w-min (max-width: min-content), max-w-max (max-width: max-content), max-w-fit (max-width: fit-content).
container utility responsive behavior
The container utility sets width: 100% and applies max-width at different breakpoints: max-width 40rem at width >= 40rem, max-width 48rem at width >= 48rem, max-width 64rem at width >= 64rem, max-width 80rem at width >= 80rem, max-width 96rem at width >= 96rem. Unlike containers in other frameworks, Tailwind's container does not center itself automatically and does not have built-in horizontal padding; use mx-auto and px-<number> utilities to add these.