Container

<!-- 1) Default container utility -->
<div class="container mx-auto px-4">
    Content scales with breakpoints
</div>

<!-- Default breakpoints (Tailwind defaults):
     sm:   max-width 640px
     md:   max-width 768px
     lg:   max-width 1024px
     xl:   max-width 1280px
     2xl:  max-width 1536px
-->

<!-- IMPORTANT: container by default sets max-width per breakpoint, NOT padding. -->
<!-- Need padding too? -->

<!-- tailwind.config.js -->
<script>
module.exports = {
    theme: {
        container: {
            center:  true,
            padding: {
                DEFAULT: '1rem',
                sm:      '2rem',
                lg:      '4rem',
                xl:      '5rem',
            },
        },
    },
};
</script>

<!-- Now <div class="container"> is auto-centred + padded per breakpoint. -->

<!-- 2) Custom max-widths -->
<script>
module.exports = {
    theme: {
        container: {
            center: true,
            padding: '1.5rem',
            screens: {
                sm:  '640px',
                md:  '768px',
                lg:  '1024px',
                xl:  '1140px',     // narrower than viewport for comfortable text width
                '2xl': '1320px',
            },
        },
    },
};
</script>

<!-- 3) max-w-* utilities — more granular than container -->
<div class="max-w-3xl mx-auto px-4">Article width</div>
<div class="max-w-7xl mx-auto px-6">App shell width</div>
<div class="max-w-prose mx-auto">Comfortable reading width (65ch)</div>
<div class="max-w-screen-lg mx-auto">Up to 1024px</div>

<!-- 4) Real-world: site shell -->
<header class="border-b">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center">
        Nav
    </div>
</header>

<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    Content
</main>

<footer class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center text-slate-500">
    © 2026
</footer>

<!-- Consistent gutters across header / main / footer create alignment. -->

<!-- 5) Article layout — prose + content -->
<article class="max-w-prose mx-auto px-4 py-12">
    <h1 class="text-4xl font-bold mb-6">Title</h1>
    <p class="text-lg leading-relaxed mb-4">…</p>
</article>

<!-- 6) Sidebar layout — different gutters per breakpoint -->
<div class="max-w-7xl mx-auto px-4 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-8">
        <aside>Sidebar</aside>
        <main>Main</main>
    </div>
</div>

<!-- 7) Container queries — newer alternative -->
<div class="@container">
    <div class="@md:flex @md:gap-6">
        <img class="@md:w-1/3" src="…" alt="">
        <div class="@md:w-2/3">Layout reacts to PARENT width, not viewport.</div>
    </div>
</div>

<!-- 8) Centering with margin auto vs grid place-items-center -->
<!-- For block centring: mx-auto -->
<div class="max-w-4xl mx-auto">…</div>

<!-- For 2D centring: place-content-center / place-items-center -->
<div class="grid place-items-center min-h-screen">Hero</div>

<!-- 9) Edge cases — full-bleed sections inside container -->
<div class="max-w-7xl mx-auto px-4">
    <section class="-mx-4 sm:-mx-6 lg:-mx-8">
        <!-- Negative margin extends beyond container padding -->
        <img class="w-full" src="hero.jpg">
    </section>
</div>

<!-- 10) Container vs max-w — which to choose -->
<!-- container: responsive max-widths via tailwind.config; system-wide consistency -->
<!-- max-w-*:   flexible per-section; doesn't require config; one-off layouts -->
<!-- Most modern Tailwind apps use max-w-* exclusively. -->

<!-- 11) Common bugs -->
<!--   • Forgot mx-auto → container alignment broken on wide screens -->
<!--   • Container has no padding by default → text touches edges; configure padding -->
<!--   • Mixing container + custom max-w → conflicting widths; pick one -->
<!--   • max-w-screen-* renamed to max-w-screen-{breakpoint} → check Tailwind version -->
<!--   • max-w on flex item without flex-basis → may not behave as expected -->
<!--   • Overflow content inside max-w with no overflow rules → horizontal scrollbars -->
<!--   • Forgetting padding on the body — content can touch the viewport edge on mobile -->

<div class="container mx-auto px-4">Centered with side padding.</div>