| Class | Properties |
|---|---|
.max-w-9 | max-width: 6rem; |
.max-w-10 | max-width: 8rem; |
.max-w-11 | max-width: 12rem; |
.max-w-12 | max-width: 16rem; |
.max-w-12 | max-width: 20rem; |
.max-w-sm | max-width: $breakpoint-sm; |
.max-w-md | max-width: $breakpoint-md; |
.max-w-lg | max-width: $breakpoint-lg; |
.max-w-xl | max-width: $breakpoint-xl; |
.max-w-full | max-width: 100%; |
.max-w-screen | max-width: 100vw; |
.max-w-none | max-width: none; |
Usage
Use .max-w-{number|breakpoint} to apply a maximum width to an element.
<div class="bg-gray-400 block p-3 max-w-12 mb-4">
.block.max-w-12
</div>
<div class="bg-gray-400 block p-3 max-w-md">
.block.max-w-md
</div>Use .max-w-none to set the maximum width of an element to none.
Variants
By default, only responsive variants are generated for max width utilities.
Responsive
To control the maximum width of an element at a specific breakpoint, add a {screen}: prefix to any existing max width utility.
For example, use .md:max-w-md to apply the max-w-md utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:max-w-md, add "max-width" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"max-width",
);