Width

<div class="space-y-4">
  <div class="w-full bg-blue-100 p-2">w-full (100% width)</div>
  <div class="w-1/2 bg-blue-200 p-2">w-1/2 (50% width)</div>
  <div class="w-1/3 bg-blue-300 p-2">w-1/3 (33.333% width)</div>
  <div class="w-1/4 bg-blue-400 p-2">w-1/4 (25% width)</div>
  <div class="w-1/5 bg-blue-500 p-2 text-white">w-1/5 (20% width)</div>
</div>

<div class="space-y-4">
  <div class="w-0 bg-green-100 p-2">w-0 (0px width - content only visible due to padding)</div>
  <div class="w-px bg-green-200 p-2">w-px (1px width - content only visible due to padding)</div>
  <div class="w-4 bg-green-300 p-2">w-4 (1rem / 16px width)</div>
  <div class="w-12 bg-green-400 p-2">w-12 (3rem / 48px width)</div>
  <div class="w-64 bg-green-500 p-2 text-white">w-64 (16rem / 256px width)</div>
</div>

<div class="w-screen h-16 bg-purple-100 mb-4 overflow-hidden">
  <div class="p-4">w-screen (100vw - viewport width)</div>
</div>

<div class="bg-gray-100 p-4 mb-4">
  <div class="max-w-md bg-purple-200 p-4">max-w-md (28rem / 448px max width)</div>
</div>

<div class="bg-gray-100 p-4">
  <div class="min-w-[300px] w-1/4 bg-purple-300 p-4">min-w-[300px] w-1/4 (minimum width with percentage)</div>
</div>

<!-- Responsive width example -->
<div class="w-full sm:w-2/3 md:w-1/2 lg:w-1/3 xl:w-1/4 bg-blue-100 p-4 rounded">
  <h2 class="font-bold mb-2">Responsive Width</h2>
  <p>This element's width changes at different screen sizes:</p>
  <ul class="list-disc pl-5 space-y-1 text-sm">
    <li>Mobile: 100% width</li>
    <li>Small screens: 66.666% width</li>
    <li>Medium screens: 50% width</li>
    <li>Large screens: 33.333% width</li>
    <li>Extra large screens: 25% width</li>
  </ul>
</div>

<!-- Common width patterns in layout -->
<div class="bg-gray-100 p-6 rounded-lg">
  <div class="mx-auto max-w-4xl bg-white p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4">Centered Container with Max Width</h2>
    <p>Using max-w-4xl (56rem / 896px) with mx-auto creates a centered container with a maximum width.</p>
    <p class="mt-4">This is useful for maintaining readable text line lengths on larger screens while utilizing full width on smaller screens.</p>
  </div>
</div>