Expand description
Utilities for setting the maximum width of an element.
| Class | Properties |
|---|---|
| max-w-<float> | max-width: <float / 4>rem; |
| max-w-<integer>/<integer> | max-width: (<integer>/<integer>)%; |
| max-w-px | max-width: 1px; |
| max-w-screen | max-width: 100vw; |
| max-w-none | max-width: none; |
| max-w-xs | max-width: 20rem; |
| max-w-sm | max-width: 24rem; |
| max-w-md | max-width: 28rem; |
| max-w-lg | max-width: 32rem; |
| max-w-xl | max-width: 36rem; |
| max-w-2xl | max-width: 42rem; |
| max-w-3xl | max-width: 48rem; |
| max-w-4xl | max-width: 56rem; |
| max-w-5xl | max-width: 64rem; |
| max-w-6xl | max-width: 72rem; |
| max-w-7xl | max-width: 80rem; |
| 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-prose | max-width: 65ch; |
| max-w-screen-sm | max-width: 640px; |
| max-w-screen-md | max-width: 768px; |
| max-w-screen-lg | max-width: 1024px; |
| max-w-screen-xl | max-width: 1280px; |
| max-w-screen-2xl | max-width: 1536px; |
§Tailwind compatibility
Maximum width values don’t follow Tailwind’s philosophy of limiting possible values and all
spacing values are supported (screen also). They are however perfectly compatible with
Tailwind’s values.
§Arbitrary values
Any <length> or <percentage> property is allowed as arbitrary value.
For example, max-w-[1.2rem].