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;


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">
<div class="bg-gray-400 block p-3 max-w-md">

Use .max-w-none to set the maximum width of an element to none.


By default, only responsive variants are generated for max width utilities.


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.


To include hover-state variants like .hover:max-w-md, add "max-width" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...

Questions or feedback about this article? Let us know