Layout
Container
The container class sets a max-width that matches the current breakpoint, giving you a responsive content wrapper. Combine it with mx-auto and padding to center your page content.
container + mx-auto + px
On its own, container is not centered and has no padding. The common recipe is "container mx-auto px-4" — a centered wrapper with breathing room on the sides.
Example
<div class="container mx-auto px-4">
<div class="bg-sky-100 p-6 rounded-lg text-center">Centered container content</div>
</div>💡
Many teams skip container and use max-w-* utilities instead (e.g. max-w-6xl mx-auto px-4) for finer control over the maximum width.
Example
<div class="max-w-3xl mx-auto px-4">
<p class="bg-white p-6 rounded-xl shadow">This wrapper never grows wider than max-w-3xl (48rem).</p>
</div>