Max Width

new

Utilities for setting the maximum width of an element.

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 mx-auto">
...
</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.

.container, max-width 540px

.container, max-width 720px

.container, max-width 960px

.container, max-width 1140px

<div class="container max-w-screen-sm border">
.container, max-width 540px
</div>
<div class="container max-w-screen-md border">
.container, max-width 720px
</div>
<div class="container max-w-screen-lg border">
.container, max-width 960px
</div>
<div class="container max-w-screen-xl border">
.container, max-width 1140px
</div>