Max-Width

<div class="space-y-4">
  <div class="max-w-xs bg-blue-100 p-2">max-w-xs (20rem / 320px max width)</div>
  <div class="max-w-sm bg-blue-200 p-2">max-w-sm (24rem / 384px max width)</div>
  <div class="max-w-md bg-blue-300 p-2">max-w-md (28rem / 448px max width)</div>
  <div class="max-w-lg bg-blue-400 p-2 text-white">max-w-lg (32rem / 512px max width)</div>
  <div class="max-w-xl bg-blue-500 p-2 text-white">max-w-xl (36rem / 576px max width)</div>
</div>

<div class="space-y-4">
  <div class="max-w-none bg-green-100 p-2">max-w-none (no maximum width)</div>
  <div class="max-w-full bg-green-200 p-2">max-w-full (100% maximum width)</div>
  <div class="max-w-[50vw] bg-green-300 p-2">max-w-[50vw] (50% of viewport width)</div>
  <div class="max-w-prose bg-green-400 p-2 text-white">max-w-prose (65ch, optimized for readability)</div>
</div>

<!-- Article with readable width -->
<article class="mx-auto max-w-prose bg-white p-6 rounded-lg shadow-md">
  <h1 class="text-2xl font-bold mb-4">Using Max Width for Readability</h1>
  <p class="mb-4">Long lines of text are hard to read. Research suggests that the optimal line length for reading is around 65 characters. That's why Tailwind provides the max-w-prose utility, which sets a maximum width of 65 characters.</p>
  <p class="mb-4">This makes your content more readable by preventing lines from becoming too long on larger screens, while still allowing the content to be fully responsive and take up the available width on smaller screens.</p>
  <p>The max-w-prose utility is perfect for blog posts, articles, and other content-heavy pages where reading comfort is a priority.</p>
</article>

<!-- Responsive layout with different max-widths -->
<div class="mx-auto max-w-full sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl bg-white p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-bold mb-4">Responsive Max Width</h2>
  <p class="mb-4">This container has different maximum widths depending on the screen size:</p>
  <ul class="list-disc pl-5 space-y-1">
    <li>Mobile: 100% width</li>
    <li>SM screens: max-w-xl (36rem / 576px)</li>
    <li>MD screens: max-w-3xl (48rem / 768px)</li>
    <li>LG screens: max-w-5xl (64rem / 1024px)</li>
    <li>XL screens: max-w-7xl (80rem / 1280px)</li>
  </ul>
  <p class="mt-4">This allows the layout to adapt to different screen sizes while maintaining appropriate content width.</p>
</div>

<!-- Card with constrained image -->
<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden">
  <div>
    <img class="h-48 w-full max-w-full object-cover" src="https://images.unsplash.com/photo-1552581234-26160f608093" alt="Mountain landscape">
  </div>
  <div class="p-6">
    <h3 class="font-bold text-xl mb-2">Mountain View</h3>
    <p class="text-gray-700">The max-w-full on the image ensures it never exceeds its container width while maintaining its aspect ratio.</p>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded">View Details</button>
  </div>
</div>