Max-Width
Use max-width utilities to constrain an element’s width. Tailwind v4 ships numeric (max-w-<number>), fractional (max-w-<fraction>), container-scale (max-w-3xs…max-w-7xl), and viewport variants on the same resolver as w-* and min-w-*.
Basic example
Section titled “Basic example”Use max-w-<number> utilities like max-w-24 and max-w-64 to set an element to a fixed maximum width based on the spacing scale.
Style('w-full max-w-96 ...', child: Text('max-w-96'))Style('w-full max-w-80 ...', child: Text('max-w-80'))Style('w-full max-w-64 ...', child: Text('max-w-64'))Style('w-full max-w-48 ...', child: Text('max-w-48'))Style('w-full max-w-40 ...', child: Text('max-w-40'))Style('w-full max-w-32 ...', child: Text('max-w-32'))Style('w-full max-w-24 ...', child: Text('max-w-24'))Using a percentage
Section titled “Using a percentage”Use max-w-full or max-w-<fraction> utilities like max-w-1/2 and max-w-2/5 to give an element a percentage-based maximum width. Fractions resolve via a LayoutBuilder against the bounded parent.
Style('w-full max-w-9/10 ...', child: Text('max-w-9/10'))Style('w-full max-w-3/4 ...', child: Text('max-w-3/4'))Style('w-full max-w-1/2 ...', child: Text('max-w-1/2'))Style('w-full max-w-1/3 ...', child: Text('max-w-1/3'))Using the container scale
Section titled “Using the container scale”Use utilities like max-w-sm and max-w-xl to set an element to a fixed maximum width based on the container scale.
Style('max-w-md ...', children: [ // ...])Using breakpoints container
Section titled “Using breakpoints container”Tailwind v4 also ships a container utility that sets the maximum width of an element to match the min-width of the current breakpoint:
<div class="container">...</div>This utility is not yet implemented in style — tracked for a future PR. Use max-w-<breakpoint> directly with responsive variants for now (md:max-w-3xl, lg:max-w-5xl, etc.).
Using a custom value
Section titled “Using a custom value”Use bracket syntax for arbitrary values: max-w-[220px], max-w-[35rem]. Unit suffixes (px, rem, em) are stripped.
Style('max-w-[220px]', child: /* ... */)Class reference
Section titled “Class reference”| Class | Value |
|---|---|
max-w-<number> | spacing scale × <number> |
max-w-<fraction> | <fraction> × parent width |
max-w-3xs | 256px |
max-w-2xs | 288px |
max-w-xs | 320px |
max-w-sm | 384px |
max-w-md | 448px |
max-w-lg | 512px |
max-w-xl | 576px |
max-w-2xl | 672px |
max-w-3xl | 768px |
max-w-4xl | 896px |
max-w-5xl | 1024px |
max-w-6xl | 1152px |
max-w-7xl | 1280px |
max-w-none | no constraint |
max-w-px | 1px |
max-w-full | 100% (infinity) |
max-w-screen | viewport width (MediaQuery) |
max-w-dvw / max-w-lvw / max-w-svw | viewport width |
max-w-dvh / max-w-lvh / max-w-svh | viewport height |
max-w-[<value>] | arbitrary value (units stripped) |
max-w-(<custom-property>) is resolved against theme-defined StyleThemeData.customProperties — e.g. max-w-(--my-max-width) behaves like max-w-[200px] when the theme defines --my-max-width: '200px'. Cascade-inherited or JS-set CSS variables remain out of scope.
Parity omissions
Section titled “Parity omissions”max-w-min/max-w-max/max-w-fit— content-based sizing. Tracked for a future PR.container— v4 layout primitive with breakpoint-keyed max-widths. Tracked for a dedicated parity item.