Container

The container utility creates a responsive, centered wrapper with max-width constraints that align with Tailwind's breakpoints. It's the foundation for most layouts, ensuring content doesn't stretch too wide on large screens while maximizing available space on smaller devices. Note that in Tailwind v4, the container doesn't add padding by default—combine with px-{size} utilities for padding.

Layout1 variant3 examples

Official Docs Open Playground

Basic usage: <div class="container mx-auto px-4">Your content here</div>

Examples

Basic container with horizontal auto margins and padding

<div class="container mx-auto px-4">Your content here</div>

Edit in playground

Container with responsive padding that adapts to screen size

<div class="container mx-auto px-4 sm:px-6 lg:px-8">
  <h1 class="text-2xl font-bold">Responsive Container</h1>
  <p>This container has responsive padding that increases at larger breakpoints.</p>
</div>

Edit in playground

Real-world example showing container in a full page layout

<!-- Complete page layout with container -->
<header class="bg-blue-500">
  <div class="container mx-auto px-4 py-6">
    <h1 class="text-white text-2xl font-bold">Website Title</h1>
  </div>
</header>

<main class="container mx-auto px-4 py-8">
  <section class="bg-white rounded-lg shadow p-6">
    <h2 class="text-xl font-semibold mb-4">Main Content</h2>
    <p>Content that stays at a readable width and is centered on larger screens.</p>
  </section>
</main>

Edit in playground

Live Preview

Try the Container utility with different values

Open Interactive Playground

Variants

By default, the container applies a different max-width at each breakpoint that matches the minimum width of the corresponding breakpoint: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). For example, at the 'md' breakpoint, the container's max-width becomes 768px.

smmdlgxl2xl