Container and the Max-Width Scale

Constraining Layout Width

Uncontrolled line lengths hurt readability. Tailwind provides a curated set of max-w-* utilities and a responsive container utility to keep content within comfortable bounds.

The max-w Scale

• max-w-xs (20rem), max-w-sm (24rem), max-w-md (28rem), max-w-lg (32rem).
• max-w-xl (36rem), max-w-2xl (42rem), max-w-3xl (48rem).
• max-w-4xl (56rem), max-w-5xl (64rem), max-w-6xl (72rem), max-w-7xl (80rem).
• max-w-prose (65ch) — optimal reading width for long-form content.
• max-w-full (100%), max-w-screen-lg — viewport-relative caps.

The container Utility

The container class sets width: 100% and then applies a max-width that matches each Tailwind breakpoint as the viewport grows. Pair it with mx-auto to center it and px-4 (or px-6) for side gutters.

<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <section class="max-w-3xl mx-auto">
    <h1 class="text-4xl font-bold">Page Title</h1>
    <p class="mt-4 text-lg text-slate-600 max-w-prose">
      This paragraph stays at a comfortable reading width.
    </p>
  </section>
</main>

Customising Container Padding in v4

@import "tailwindcss";

@theme {
  /* Override the default container padding per breakpoint */
  --container-padding: 1.5rem;
  --container-padding-lg: 2rem;
}