Sizing
max-width
Setting the maximum width of an element.
Overview
| Class | Declarations |
|---|---|
max-vw | max-width: 100vw;
|
max-w:full | max-width: 100%;
|
max-w:fit | max-width: fit-content;
|
max-w:min | max-width: min-content;
|
max-w:max | max-width: max-content;
|
max-w:3xs | max-width: var(--container-3xs);
|
max-w:2xs | max-width: var(--container-2xs);
|
max-w:xs | max-width: var(--container-xs);
|
max-w:sm | max-width: var(--container-sm);
|
max-w:md | max-width: var(--container-md);
|
max-w:lg | max-width: var(--container-lg);
|
max-w:xl | max-width: var(--container-xl);
|
max-w:2xl | max-width: var(--container-2xl);
|
max-w:3xl | max-width: var(--container-3xl);
|
max-w:4xl | max-width: var(--container-4xl);
|
max-w:5xl | max-width: var(--container-5xl);
|
max-w:6xl | max-width: var(--container-6xl);
|
max-w:7xl | max-width: var(--container-7xl);
|
max-w:<size> | max-width: <size>;
|
Examples
Cap a fluid element
Use max-w:* to let an element shrink with its container while preventing it from growing too wide.
<main class="w:full max-w:5xl mx:auto"> ...</main>Generated CSS
@layer theme { :root { --container-5xl: 64rem }}@layer utilities { .mx\:auto { margin-inline: auto } .max-w\:5xl { max-width: var(--container-5xl) } .w\:full { width: 100% }}Set a readable measure
Use text-relative units when the maximum width is based on reading comfort instead of the container scale.
<article class="w:full max-w:72ch"> ...</article>Keep media responsive
Use max-w:full to prevent replaced elements such as images or videos from overflowing their parent.
<img class="max-w:full h:auto" src="..." alt="" />Use viewport and container caps
Use max-vw when an element should never exceed the viewport width. Use max-w:* when the cap should follow the container theme token scale.
<section class="max-vw max-w:7xl@lg"> ...</section>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="max-w:full max-w:4xl@sm max-w:72ch@print">...</div>Pair max-w:* with w:full for wrappers that should be fluid until they hit the cap.