Max Width

Utilities for setting the maximum width of an element.

Quick reference

.max-w-0max-width: 0px;
.max-w-nonemax-width: none;
.max-w-xsmax-width: 320px;
.max-w-smmax-width: 384px;
.max-w-mdmax-width: 448px;
.max-w-lgmax-width: 512px;
.max-w-xlmax-width: 576px;
.max-w-2xlmax-width: 672px;
.max-w-3xlmax-width: 768px;
.max-w-4xlmax-width: 896px;
.max-w-5xlmax-width: 1024px;
.max-w-fullmax-width: 100%;
.max-w-minmax-width: min-content;
.max-w-maxmax-width: max-content;
.max-w-fitmax-width: fit-content;
.max-w-screen-smmax-width: 540px;
.max-w-screen-mdmax-width: 720px;
.max-w-screen-lgmax-width: 960px;
.max-w-screen-xlmax-width: 1140px;
.max-w-screen-xxlmax-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">

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 class="container max-w-screen-md border">
.container, max-width 720px
<div class="container max-w-screen-lg border">
.container, max-width 960px
<div class="container max-w-screen-xl border">
.container, max-width 1140px