Max width

Utilities for setting the maximum width of an element.

In this article

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",
);

Questions or feedback about this article? Let us know