Max-Width

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 className="**max-w-md** ...">
  <!-- ... -->
</div>

Reading width

The max-w-prose utility gives an element a max-width optimized for readability and adapts based on the font size.

<div className="text-sm **max-w-prose** ...">
  <p>
    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the
    muffin breaks free of the pan and sort of does it's own thing. I'll tell
    you. That's a million dollor idea right there. Just sell the tops.
  </p>
</div>

<div className="text-base **max-w-prose** ...">
  <p>
    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the
    muffin breaks free of the pan and sort of does it's own thing. I'll tell
    you. That's a million dollor idea right there. Just sell the tops.
  </p>
</div>

<div className="text-xl **max-w-prose** ...">
  <p>
    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the
    muffin breaks free of the pan and sort of does it's own thing. I'll tell
    you. That's a million dollor idea right there. Just sell the tops.
  </p>
</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 theme.screens section of your tailwind.config.js file.

<div className="max-w-screen-2xl">
  <!-- ... -->
</div>