Contents
Quick reference
| Class | Properties |
|---|---|
.max-w-0 | max-width: 0px; |
.max-w-none | max-width: none; |
.max-w-xs | max-width: 320px; |
.max-w-sm | max-width: 384px; |
.max-w-md | max-width: 448px; |
.max-w-lg | max-width: 512px; |
.max-w-xl | max-width: 576px; |
.max-w-2xl | max-width: 672px; |
.max-w-3xl | max-width: 768px; |
.max-w-4xl | max-width: 896px; |
.max-w-5xl | max-width: 1024px; |
.max-w-full | max-width: 100%; |
.max-w-min | max-width: min-content; |
.max-w-max | max-width: max-content; |
.max-w-fit | max-width: fit-content; |
.max-w-screen-sm | max-width: 540px; |
.max-w-screen-md | max-width: 720px; |
.max-w-screen-lg | max-width: 960px; |
.max-w-screen-xl | max-width: 1140px; |
.max-w-screen-xxl | max-width: 1320px; |
Basic usage
Setting the maximum width
Set the maximum width of an element using the max-w-{size} utilities.
Andrew Alfred
Assistant to the Traveling Secretary
<div class="max-w-md ...">
...
</div>
Constraining to your breakpoints
The max-w-screen-{breakpoint} classes can be used to give an element a max-width matching a specific breakpoint.
These values are automatically derived from the SASS variable $container-max-widths. See Breakpoints section.
.max-w-xs
.max-w-screen-sm
.max-w-screen-md
.max-w-screen-lg
Edit this page on Github
Last updated on April 6, 2024