Elements logo

Max-width

Utilities for setting the maximum width of an element

Class reference

ClassProperties
max-w-0max-width: 0;
max-w-pxmax-width: 1px;
max-w-0.5max-width: 0.125rem;
max-w-1max-width: 0.25rem;
max-w-1.5max-width: 0.375rem;
max-w-2max-width: 0.5rem;
max-w-2.5max-width: 0.625rem;
max-w-3max-width: 0.75rem;
max-w-3.5max-width: 0.875rem;
max-w-4max-width: 1rem;
max-w-4.5max-width: 1.125rem;
max-w-5max-width: 1.25rem;
max-w-6max-width: 1.5rem;
max-w-7max-width: 1.75rem;
max-w-8max-width: 2rem;
max-w-9max-width: 2.25rem;
max-w-10max-width: 2.5rem;
max-w-11max-width: 2.75rem;
max-w-12max-width: 3rem;
max-w-13max-width: 3.25rem;
max-w-14max-width: 3.5rem;
max-w-15max-width: 3.75rem;
max-w-16max-width: 4rem;
max-w-18max-width: 4.5rem;
max-w-20max-width: 5rem;
max-w-24max-width: 6rem;
max-w-28max-width: 7rem;
max-w-32max-width: 8rem;
max-w-36max-width: 9rem;
max-w-40max-width: 10rem;
max-w-48max-width: 12rem;
max-w-56max-width: 14rem;
max-w-60max-width: 15rem;
max-w-64max-width: 16rem;
max-w-72max-width: 18rem;
max-w-xsmax-width: 20rem;
max-w-80max-width: 20rem;
max-w-smmax-width: 24rem;
max-w-96max-width: 24rem;
max-w-mdmax-width: 28rem;
max-w-lgmax-width: 32rem;
max-w-xlmax-width: 36rem;
max-w-2xlmax-width: 42rem;
max-w-3xlmax-width: 48rem;
max-w-4xlmax-width: 56rem;
max-w-5xlmax-width: 64rem;
max-w-6xlmax-width: 72rem;
max-w-7xlmax-width: 80rem;
max-w-8xlmax-width: 90rem;
max-w-9xlmax-width: 120rem;
max-w-nonemax-width: none;
max-w-fullmax-width: 100%;
max-w-minmax-width: min-content;
max-w-maxmax-width: max-content;
max-w-prosemax-width: 65ch;
max-w-screen-smmax-width: 640px;
max-w-screen-mdmax-width: 768px;
max-w-screen-lgmax-width: 1024px;
max-w-screen-xlmax-width: 1280px;
max-w-screen-2xlmax-width: 1536px;
max-w-1/4max-width: 25%;
max-w-1/2max-width: 50%;
max-w-3/4max-width: 75%;
max-w-screen-25max-width: 25vw;
max-w-screen-50max-width: 50vw;
max-w-screen-75max-width: 75vw;

# Usage

Set the maximum width of an element using the max-w-{size} utilities.

max-w-md
<div class="max-w-md mx-auto ...">
  max-w-md
</div>

# Prose

We added a new max-width by default called max-w-prose. If you are familiar with the Tailwind CSS Typography plugin you might recognize this one. The idea behind this class is that it allows you to have an optimal reading width.

Why do you never see elephants hiding in trees?

Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.

<div class="max-w-prose ...">
  <p class="font-bold">Why do you never see elephants hiding in trees?</p>
  <p>Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</p>
</div>

# Responsive

To control the max-width of an element at a specific breakpoint, add a {screen}: prefix to any existing max-width utility.

<div class="max-w-sm **md:max-w-lg** ...">
  <!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.