Container and Layout Containers

Tailwind's container class sets a max-width matching the current breakpoint. Most teams prefer explicit max-w-* values for more predictable control.

Built-in container

<div class="container mx-auto px-4 sm:px-6 lg:px-8">
  Content constrained to breakpoint max-width
</div>

Manual max-width containers (recommended)

<section class="bg-gray-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <h2 class="text-3xl font-bold">Features</h2>
  </div>
</section>

<article class="max-w-2xl mx-auto px-4 py-12">
  <p class="text-gray-700 leading-relaxed">Article content</p>
</article>

Full-bleed background with constrained content

<section class="bg-blue-600 text-white">
  <div class="max-w-6xl mx-auto px-6 py-20">
    <h1 class="text-5xl font-bold">Hero headline</h1>
  </div>
</section>

The built-in container changes its max-width at each breakpoint, which can surprise you. Most teams skip it in favor of explicit max-w-* values.