The Container
Center content and cap its width with the container class.
Syntax
class="container mx-auto px-4"The container class sets the element's max-width to match the current breakpoint. Combine it with mx-auto to center it and padding to keep content off the edges.
Unlike some frameworks, Tailwind's container is not fluid by default — it snaps to each breakpoint's width.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer centers a page's content and caps it at a readable width by wrapping sections in a div with the container class.
- A marketing page keeps text and images from stretching across ultra-wide monitors by adding container mx-auto to the layout wrapper.
- A team customizes the container's max-width breakpoints in tailwind.config.js to match the brand's grid specification.
More examples
Centered container
container sets a max-width per breakpoint, and mx-auto horizontally centers the block; px-4 adds horizontal breathing room.
<div class="container mx-auto px-4">
<h1 class="text-2xl font-bold">Page Title</h1>
<p class="mt-2 text-gray-600">Content stays centered and capped in width.</p>
</div>Full-width section, container inside
The section spans the full viewport width for the background, while the inner container constrains the readable content to a max-width.
<section class="bg-slate-900 py-16">
<div class="container mx-auto px-6 text-white">
<h2 class="text-3xl font-semibold">Hero Heading</h2>
<p class="mt-4 text-slate-300">Full-width background, constrained content.</p>
</div>
</section>Custom container in config
Setting center: true and custom padding in the config makes every container automatically centered with consistent gutters without repeating mx-auto.
// tailwind.config.js
module.exports = {
theme: {
container: {
center: true,
padding: '1.5rem',
screens: { lg: '1024px', xl: '1280px' },
},
},
}
Discussion