How to use max width in Tailwind CSS

You're building a form, a card, or maybe a content section. Without any width constraints, it stretches all the way across the screen on large monitors and looks absolutely terrible.

This is where max-width comes in handy. It keeps your content readable and your designs looking professional, no matter what screen size your visitors are using.

Tailwind CSS gives you tons of max-width utilities out of the box, and I'm going to show you exactly how to use them.

Understanding the basic max-width classes

Tailwind comes with preset max-width classes that cover most common use cases. These range from extra small (max-w-xs) all the way up to extra large (max-w-7xl).

Here's what they translate to in actual pixel values:

Class	Width	Pixels (at 16px base)
`max-w-xs`	20rem	320px
`max-w-sm`	24rem	384px
`max-w-md`	28rem	448px
`max-w-lg`	32rem	512px
`max-w-xl`	36rem	576px
`max-w-2xl`	42rem	672px
`max-w-3xl`	48rem	768px
`max-w-4xl`	56rem	896px
`max-w-5xl`	64rem	1024px
`max-w-6xl`	72rem	1152px
`max-w-7xl`	80rem	1280px

These preset classes are perfect for cards, forms, and content containers. Let me show you how they look in action:

<div class='space-y-4 p-4'>
  <div class='max-w-xs bg-blue-100 p-4 rounded-lg border border-blue-200'>
    <p class='text-sm font-medium text-blue-900 mb-1'>max-w-xs</p>
    <p class='text-xs text-blue-700'>320px wide - Perfect for small cards or mobile-first components</p>
  </div>

  <div class='max-w-md bg-green-100 p-4 rounded-lg border border-green-200'>
    <p class='text-sm font-medium text-green-900 mb-1'>max-w-md</p>
    <p class='text-xs text-green-700'>448px wide - Great for forms, login boxes, and medium-sized cards</p>
  </div>

  <div class='max-w-2xl bg-purple-100 p-4 rounded-lg border border-purple-200'>
    <p class='text-sm font-medium text-purple-900 mb-1'>max-w-2xl</p>
    <p class='text-xs text-purple-700'>672px wide - Ideal for blog content and article layouts where readability matters</p>
  </div>

  <div class='max-w-5xl bg-orange-100 p-4 rounded-lg border border-orange-200'>
    <p class='text-sm font-medium text-orange-900 mb-1'>max-w-5xl</p>
    <p class='text-xs text-orange-700'>1024px wide - Works well for dashboard layouts and wide content sections</p>
  </div>
</div>

As you can see, each size serves a different purpose. I usually reach for max-w-md for forms, max-w-2xl for blog content, and max-w-5xl or larger for dashboard-style layouts.

There are also some special max-width values worth knowing about:

max-w-full - Sets max-width to 100% (useful for images)
max-w-screen - Sets max-width to 100vw (full viewport width)
max-w-none - Removes any max-width constraint
max-w-prose - Optimized for reading (around 65 characters per line)

Using responsive max-width for different screens

Here's where things get really powerful. You can apply different max-width values at different breakpoints using Tailwind's responsive prefixes.

The pattern is simple: {breakpoint}:max-w-{size}

For example, md:max-w-lg means "apply max-w-lg starting at the medium breakpoint". This is super useful when you want full-width elements on mobile but constrained widths on larger screens.

Let me show you a real-world example. Say you're building a hero section that should be full-width on mobile but have a max-width on desktop:

<div class='p-4 bg-gray-50'>
  <div class='max-w-full md:max-w-2xl lg:max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-6'>
    <div class='flex items-center justify-between mb-4'>
      <h2 class='text-xl font-bold text-gray-900'>Responsive Container</h2>
      <span class='text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded'>Resize me!</span>
    </div>
    <p class='text-gray-600 mb-3'>This container adapts based on screen size.</p>
    <ul class='space-y-2 text-sm text-gray-700'>
      <li class='flex items-start'>
        <span class='text-blue-500 mr-2'>📱</span>
        <span><strong>Mobile:</strong> Full width (no constraint)</span>
      </li>
      <li class='flex items-start'>
        <span class='text-green-500 mr-2'>💻</span>
        <span><strong>Tablet (md):</strong> Max 672px wide</span>
      </li>
      <li class='flex items-start'>
        <span class='text-purple-500 mr-2'>🖥️</span>
        <span><strong>Desktop (lg):</strong> Max 896px wide</span>
      </li>
    </ul>
  </div>
</div>

This pattern is everywhere in modern web design. Your content breathes on mobile, but stays readable and focused on larger screens.

You can also go the other direction – start with a constraint and remove it at larger breakpoints using max-w-none:

<div class='p-4 bg-gradient-to-br from-purple-50 to-pink-50'>
  <div class='max-w-sm lg:max-w-none bg-white rounded-lg shadow-md p-6'>
    <div class='flex items-center gap-2 mb-3'>
      <div class='size-3 rounded-full bg-red-400'></div>
      <div class='size-3 rounded-full bg-yellow-400'></div>
      <div class='size-3 rounded-full bg-green-400'></div>
    </div>
    <h3 class='font-semibold text-gray-800 mb-2'>Dashboard Widget</h3>
    <p class='text-sm text-gray-600'>This widget is constrained to max-w-sm on smaller screens for better readability.</p>
    <p class='text-sm text-gray-600 mt-2'>But on large screens (lg breakpoint), it expands to fill available space using max-w-none.</p>
  </div>
</div>

The responsive approach gives you total control over how your layout adapts. Start mobile-first and progressively enhance for larger screens.

Working with percentage-based max-width

Sometimes you don't want a fixed pixel width – you want something relative to the parent container. That's where fractional max-width classes come in.

Tailwind provides these out of the box:

max-w-1/2 - 50% of parent
max-w-1/3 and max-w-2/3 - Thirds
max-w-1/4, max-w-2/4, max-w-3/4 - Quarters
max-w-1/5 through max-w-4/5 - Fifths

These are perfect for creating flexible layouts that adapt to their container size. Let me show you a two-column layout example:

<div class='p-4 space-y-6'>
  <div class='flex gap-4'>
    <div class='w-2/3 bg-blue-100 border border-blue-200 rounded-lg p-4'>
      <h3 class='text-sm font-semibold text-blue-900 mb-2'>Main Content (2/3)</h3>
      <p class='text-xs text-blue-700'>This section takes up two-thirds of the available space. Perfect for your primary content.</p>
    </div>
    <div class='w-1/3 bg-gray-100 border border-gray-200 rounded-lg p-4'>
      <h3 class='text-sm font-semibold text-gray-900 mb-2'>Sidebar (1/3)</h3>
      <p class='text-xs text-gray-700'>This sidebar gets one-third of the space.</p>
    </div>
  </div>

  <div class='flex gap-4'>
    <div class='w-1/2 bg-green-100 border border-green-200 rounded-lg p-4'>
      <h3 class='text-sm font-semibold text-green-900 mb-2'>Left Half (1/2)</h3>
      <p class='text-xs text-green-700'>Equal width columns using max-w-1/2</p>
    </div>
    <div class='w-1/2 bg-purple-100 border border-purple-200 rounded-lg p-4'>
      <h3 class='text-sm font-semibold text-purple-900 mb-2'>Right Half (1/2)</h3>
      <p class='text-xs text-purple-700'>Both sections get exactly 50%</p>
    </div>
  </div>

  <div class='grid grid-cols-5 gap-2'>
    <div class='bg-red-100 border border-red-200 rounded p-2 text-center'>
      <p class='text-xs font-medium text-red-900'>1/5</p>
    </div>
    <div class='bg-orange-100 border border-orange-200 rounded p-2 text-center'>
      <p class='text-xs font-medium text-orange-900'>1/5</p>
    </div>
    <div class='bg-yellow-100 border border-yellow-200 rounded p-2 text-center'>
      <p class='text-xs font-medium text-yellow-900'>1/5</p>
    </div>
    <div class='bg-green-100 border border-green-200 rounded p-2 text-center'>
      <p class='text-xs font-medium text-green-900'>1/5</p>
    </div>
    <div class='bg-blue-100 border border-blue-200 rounded p-2 text-center'>
      <p class='text-xs font-medium text-blue-900'>1/5</p>
    </div>
  </div>
</div>

The big difference between fractional widths and fixed widths is how they behave when the parent container changes size. Fixed widths stay... well, fixed. Fractional widths scale proportionally.

Here's when I use each:

Use Case	Width Type	Why
Blog post content	Fixed (`max-w-2xl`)	Consistent reading width regardless of screen
Dashboard cards	Fractional (`max-w-1/3`)	Adapt to available space in the layout
Form inputs	Fixed (`max-w-md`)	Predictable, comfortable input width
Image galleries	Fractional (`max-w-1/4`)	Fill available space evenly

You can also combine fractional widths with responsive prefixes for even more control: max-w-full md:max-w-1/2 lg:max-w-1/3

Creating custom max-width values

What if the preset values don't fit your design? No problem. Tailwind lets you use arbitrary values with bracket notation.

The syntax is straightforward: max-w-[value]

You can use any CSS unit – pixels, rems, ems, percentages, viewport units, even calc():

<div class='p-4 space-y-4 bg-gray-50'>
  <div class='max-w-[280px] bg-blue-100 border border-blue-200 rounded-lg p-3'>
    <p class='text-xs font-semibold text-blue-900 mb-1'>max-w-[280px]</p>
    <p class='text-xs text-blue-700'>Exact pixel value when you need precise control</p>
  </div>

  <div class='max-w-[35rem] bg-green-100 border border-green-200 rounded-lg p-3'>
    <p class='text-xs font-semibold text-green-900 mb-1'>max-w-[35rem]</p>
    <p class='text-xs text-green-700'>Using rems scales with font size settings</p>
  </div>

  <div class='max-w-[75%] bg-purple-100 border border-purple-200 rounded-lg p-3'>
    <p class='text-xs font-semibold text-purple-900 mb-1'>max-w-[75%]</p>
    <p class='text-xs text-purple-700'>Percentage of parent container</p>
  </div>

  <div class='max-w-[50ch] bg-orange-100 border border-orange-200 rounded-lg p-3'>
    <p class='text-xs font-semibold text-orange-900 mb-1'>max-w-[50ch]</p>
    <p class='text-xs text-orange-700'>Character units (ch) are perfect for text - roughly 50 characters wide</p>
  </div>

  <div class='max-w-[min(600px,90%)] bg-pink-100 border border-pink-200 rounded-lg p-3'>
    <p class='text-xs font-semibold text-pink-900 mb-1'>max-w-[min(600px,90%)]</p>
    <p class='text-xs text-pink-700'>CSS min() function: never wider than 600px or 90% of parent, whichever is smaller</p>
  </div>
</div>

Each unit has its place:

Pixels (px) - When you need an exact measurement
Rems (rem) - Scales with user font size preferences (accessibility win)
Ems (em) - Relative to the element's font size
Character units (ch) - Based on the width of the "0" character, great for text
Viewport width (vw) - Relative to browser width
Calc() - Dynamic calculations for complex layouts

My go-to choice? Rems for most cases. They respect user preferences and scale nicely. I'll use pixels when I need exact control (like matching a design mockup), and character units for text-heavy content.

Here's a practical example using ch units for optimal reading width:

<div class='p-6 bg-gradient-to-br from-gray-50 to-gray-100'>
  <article class='max-w-[65ch] mx-auto bg-white rounded-lg shadow-md p-6'>
    <h2 class='text-lg font-bold text-gray-900 mb-4'>The Perfect Line Length</h2>
    <p class='text-gray-700 mb-3'>Typography experts say the ideal line length for body text is between 50-75 characters. This example uses max-w-[65ch] to keep lines at a comfortable reading width.</p>
    <p class='text-gray-700 mb-3'>Notice how you don't have to move your eyes too far left and right? That's the magic of using character units instead of pixels or percentages.</p>
    <p class='text-gray-700'>It adapts to the font size too, so if someone increases their browser's default font, the line length stays proportionally correct.</p>
  </article>
</div>

The ch unit is seriously underrated for text content. It keeps your text readable regardless of font family or size.

Centering content with max-width

Here's the pattern you'll see everywhere: combine max-w-* with mx-auto to center content on the page.

The mx-auto class sets left and right margins to auto, which pushes the element to the center. When you pair it with a max-width, you get a perfectly centered container that never gets too wide.

<div class='bg-gray-100 p-8'>
  <div class='max-w-2xl mx-auto bg-white rounded-xl shadow-lg p-6'>
    <h2 class='text-2xl font-bold text-gray-900 mb-4'>Beautiful Centered Layout</h2>
    <p class='text-gray-700 mb-3'>This is the most common pattern in modern web design. The content has a maximum width of 672px (max-w-2xl) and is centered using mx-auto.</p>
    <p class='text-gray-700 mb-4'>On smaller screens, it fills the available space. On larger screens, it stays centered and never gets uncomfortably wide.</p>
    <div class='flex gap-3'>
      <button class='px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600'>Primary Action</button>
      <button class='px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300'>Secondary</button>
    </div>
  </div>
</div>

Notice I also added px-4 in the example? That's padding on the left and right. Without it, your content would touch the edges on mobile. Always add horizontal padding when centering content.

Here's a complete example showing a typical page layout:

<main class='max-w-6xl mx-auto px-4 py-8 bg-gray-50 min-h-screen'>
  <header class='mb-8 text-center'>
    <h1 class='text-3xl font-bold text-gray-900 mb-2'>Complete Page Layout</h1>
    <p class='text-gray-600'>This entire layout is centered with max-w-6xl</p>
  </header>

  <article class='max-w-2xl mx-auto bg-white rounded-lg shadow-md p-6 mb-8'>
    <h2 class='text-xl font-semibold text-gray-900 mb-3'>Article Content</h2>
    <p class='text-gray-700 mb-3'>The main content area uses max-w-2xl for optimal readability. This keeps your paragraphs at a comfortable line length.</p>
    <p class='text-gray-700 mb-3'>Even though the outer container is max-w-6xl, we can nest a narrower max-width inside for different content types.</p>
    <p class='text-gray-700'>This is a common pattern for blog posts and articles where the text needs to be narrower than other page elements.</p>
  </article>

  <div class='grid grid-cols-1 md:grid-cols-3 gap-6 mb-8'>
    <div class='bg-blue-100 rounded-lg p-4 border border-blue-200'>
      <h3 class='font-semibold text-blue-900 mb-2 text-sm'>Feature 1</h3>
      <p class='text-xs text-blue-700'>These cards use the full width of the max-w-6xl container</p>
    </div>
    <div class='bg-green-100 rounded-lg p-4 border border-green-200'>
      <h3 class='font-semibold text-green-900 mb-2 text-sm'>Feature 2</h3>
      <p class='text-xs text-green-700'>They adapt to grid layout on larger screens</p>
    </div>
    <div class='bg-purple-100 rounded-lg p-4 border border-purple-200'>
      <h3 class='font-semibold text-purple-900 mb-2 text-sm'>Feature 3</h3>
      <p class='text-xs text-purple-700'>Creating a balanced, professional layout</p>
    </div>
  </div>

  <footer class='text-center text-sm text-gray-600 border-t border-gray-200 pt-6'>
    <p>Footer content spans the full max-w-6xl width</p>
  </footer>
</main>

This layered approach – wider outer container, narrower inner content – gives you flexibility while maintaining visual hierarchy. The outer container (max-w-6xl) holds everything, but the article content (max-w-2xl) stays narrow for better reading.

You can nest max-widths as much as needed. Just remember that an inner max-width can only make things narrower, never wider than its parent.

That's everything you need to know about using max-width in Tailwind CSS. Start with the preset classes, use responsive breakpoints to adapt your layouts, and reach for arbitrary values when you need custom widths.

The combination of max-w-* and mx-auto will become second nature once you start using it. It's one of those patterns that just works.

How to use max width in Tailwind CSS

Understanding the basic max-width classes

Using responsive max-width for different screens

Working with percentage-based max-width

Creating custom max-width values

Centering content with max-width

Other posts you might like...

Styling forms with Tailwind CSS

How to create loading spinners in Tailwind CSS

How to control line height in Tailwind CSS

Subscribe to our newsletter