Max-Width

Utilities for setting the maximum width of an element.

Show all classes

Set the maximum width of an element using the utilities.

Reading width

<div class="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 dollar idea right there. Just sell the tops.</p>
</div>
<div class="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 dollar idea right there. Just sell the tops.</p>
</div>
<div class="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 dollar idea right there. Just sell the tops.</p>

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 of your tailwind.config.js file.

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:max-w-lg to only apply the max-w-lg utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

To learn more, check out the documentation on Responsive Design, and other media query modifiers.

Customizing your theme

You can customize your max-width scale by editing theme.maxWidth or in your tailwind.config.js file.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      maxWidth: {
        '1/2': '50%',
      }
    }
}

Learn more about customizing the default theme in the documentation.

Learn more about arbitrary value support in the documentation.