Skip to main content

​
Overview

Use max-width utilities to limit how wide an element can become. These utilities are essential for creating readable content widths, centered layouts, and responsive containers that scale appropriately.

​
Static Max Width Utilities

Max Width Properties

.max-w-sm400pxmax-width: 400px;Small max width
.max-w-md600pxmax-width: 600px;Medium max width
.max-w-lg800pxmax-width: 800px;Large max width
.max-w-xl1000pxmax-width: 1000px;Extra large max width
.max-w-2xl1200pxmax-width: 1200px;2x large max width
.max-w-full100%max-width: 100%;Full max width

​
Fluid Max Width Utilities

Fluid max-width utilities use clamp() to scale smoothly between mobile and desktop sizes, perfect for responsive content containers.

Fluid Max Width Properties

Clamp ExpressionMobile → Desktop
.max-w-fluid-smclamp(20rem, calc(17rem + 7.4vw), 25rem)320px → 400px
.max-w-fluid-mdclamp(30rem, calc(25.5rem + 11.1vw), 37.5rem)480px → 600px
.max-w-fluid-lgclamp(40rem, calc(34rem + 14.8vw), 50rem)640px → 800px
.max-w-fluid-xlclamp(50rem, calc(42.5rem + 18.5vw), 62.5rem)800px → 1000px
.max-w-fluid-2xlclamp(60rem, calc(51rem + 22.2vw), 75rem)960px → 1200px
.max-w-fluid-full100%Full max width

​
Static Max Width Examples

​
Small Max Width (400px)

<div class="max-w-sm mx-auto p-6 bg-gray-light rounded">
  <h3 class="text-xl font-semibold mb-4">Small Container</h3>
  <p class="text-gray">Content constrained to 400px maximum width</p>
</div>

​
Medium Max Width (600px)

<div class="max-w-md mx-auto p-6 bg-gray-light rounded">
  <h3 class="text-xl font-semibold mb-4">Medium Container</h3>
  <p class="text-gray">Content constrained to 600px maximum width</p>
</div>

​
Large Max Width (800px)

<div class="max-w-lg mx-auto p-6 bg-gray-light rounded">
  <h3 class="text-xl font-semibold mb-4">Large Container</h3>
  <p class="text-gray">Content constrained to 800px maximum width</p>
</div>

​
Extra Large Max Width (1000px)

<div class="max-w-xl mx-auto p-6 bg-gray-light rounded">
  <h3 class="text-xl font-semibold mb-4">Extra Large Container</h3>
  <p class="text-gray">Content constrained to 1000px maximum width</p>
</div>

​
2X Large Max Width (1200px)

<div class="max-w-2xl mx-auto p-6 bg-gray-light rounded">
  <h3 class="text-xl font-semibold mb-4">2X Large Container</h3>
  <p class="text-gray">Content constrained to 1200px maximum width</p>
</div>

​
Fluid Max Width Examples

​
Article with Fluid Max Width

<article class="max-w-fluid-2xl mx-auto p-6">
  <h1 class="text-4xl font-bold mb-6">Article Title</h1>
  <p class="text-lg leading-relaxed mb-4">
    Content that scales smoothly across viewport sizes, from mobile to desktop.
  </p>
  <p class="text-lg leading-relaxed">
    The max-width adapts automatically without media queries.
  </p>
</article>

​
Hero Section with Fluid Max Width

<section class="text-center py-fluid-12">
  <div class="max-w-fluid-xl mx-auto px-fluid-6">
    <h1 class="text-fluid-6xl font-bold mb-fluid-4">Hero Title</h1>
    <p class="text-fluid-lg text-gray mb-fluid-8">
      Supporting text that scales with the container
    </p>
    <button class="btn btn-blue btn-lg">Get Started</button>
  </div>
</section>

​
Centered Content Container

<div class="max-w-fluid-lg mx-auto p-fluid-6">
  <h2 class="text-3xl font-bold mb-4">Centered Content</h2>
  <p class="text-lg text-gray leading-relaxed">
    This container scales smoothly between mobile and desktop sizes,
    maintaining optimal readability at all viewport widths.
  </p>
</div>

​
Common Patterns

​
Readable Article Width

<article class="max-w-2xl mx-auto p-6">
  <h1 class="text-4xl font-bold mb-6">Article Title</h1>
  <div class="prose">
    <p class="text-lg leading-relaxed mb-4">
      Article content with optimal line length for readability.
    </p>
    <p class="text-lg leading-relaxed">
      The max-width ensures lines don't become too long on large screens.
    </p>
  </div>
</article>

​
Responsive Card Container

<div class="max-w-fluid-xl mx-auto p-fluid-6">
  <div class="flex flex-wrap gap-6">
    <div class="w-full md:w-1-2">
      <div class="card p-6">Card 1</div>
    </div>
    <div class="w-full md:w-1-2">
      <div class="card p-6">Card 2</div>
    </div>
  </div>
</div>

​
Centered Form

<div class="max-w-md mx-auto p-6">
  <h2 class="text-2xl font-bold mb-6 text-center">Contact Form</h2>
  <form class="space-y-4">
    <div>
      <label class="text-sm font-medium mb-2">Name</label>
      <input type="text" class="w-full p-3 border border-gray rounded">
    </div>
    <div>
      <label class="text-sm font-medium mb-2">Email</label>
      <input type="email" class="w-full p-3 border border-gray rounded">
    </div>
    <button class="w-full btn btn-blue">Submit</button>
  </form>
</div>

​
Best Practices

1

Use for Readability

Use max-width utilities to constrain content width for optimal readability, typically 600-800px for body text.
2

Center with Auto Margin

Combine max-width with .mx-auto (or .ml-auto/.mr-auto) to center containers.
3

Use Fluid for Responsive

Use fluid max-width utilities for content that needs to scale smoothly across viewport sizes.
4

Match Content Type

Choose max-width based on content type: forms (400-600px), articles (800-1200px), hero sections (1000-1200px).

​
When to Use Static vs Fluid

​
Use Static Max Width For:

  • Forms and input containers (.max-w-sm, .max-w-md)
  • Fixed-width layouts that need precise control
  • Components with specific size requirements
  • UI elements that shouldn’t scale

​
Use Fluid Max Width For:

  • Article content and long-form text
  • Hero sections and marketing pages
  • Content containers that need responsive scaling
  • Layouts that should adapt smoothly across breakpoints
Combine fluid max-width with fluid typography and spacing utilities for fully responsive designs that scale smoothly without media queries.

Width

Control element width

Height

Control element height

Spacing

Margin utilities for centering

Sizing

All sizing utilities overview