Utilities for setting the maximum width of an element

Class reference

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;


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

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


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>


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** ...">
<!-- ... -->

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