Tailwind CSS - Container

Tailwind CSS - The Container

The .container utility is a fundamental component for creating well-structured layouts. It provides a responsive, fixed-width container that is centered horizontally. Its primary purpose is to constrain the width of your content to a reasonable size on large screens, while allowing it to be full-width on small screens.

Core Behavior

• Responsive Max-Width: The container’s max-width is set to match your configured responsive breakpoints (sm, md, lg, etc.). On a lg screen, for example, the container’s max-width will be 1024px by default.
• Automatic Centering: By default, the .container class applies margin-left: auto and margin-right: auto, which centers it within its parent.
• 100% Width on Small Screens: Below the smallest breakpoint (sm), the container will have a width of 100%.

Default Breakpoints and Max-Widths

Here is how the container’s max-width changes at each default breakpoint:

Breakpoint	Screen Size	Container max-width
None	< 640px	100%
sm	≥ 640px	640px
md	≥ 768px	768px
lg	≥ 1024px	1024px
xl	≥ 1280px	1280px
2xl	≥ 1536px	1536px

Example: Visualizing the Container

This example clearly demonstrates the container’s behavior. The outer gray area represents the <body>, and the inner white area is the .container. Resize your browser window to see how the container’s width is constrained at each breakpoint while remaining centered.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<!-- The body has a gray background to make the container visible -->
<body class="bg-slate-200">

  <!-- The container is centered and has its own background and padding -->
  <div class="container mx-auto bg-white min-h-screen p-8 shadow-lg">
    <h1 class="text-3xl font-bold mb-4">Exploring the Tailwind Container</h1>
    <p class="text-slate-700 leading-relaxed">
      This content is inside a `.container` element. On large screens, its width is capped at the current breakpoint's `max-width` (e.g., 1024px on `lg` screens). On small screens (less than 640px wide), it will stretch to fill the full width of the viewport. The `mx-auto` utility is redundant in recent Tailwind versions as the container centers itself, but it's good practice to be explicit. The horizontal padding (`px-4` or `p-8`) is added manually to prevent text from touching the edges of the container.
    </p>
    <div class="mt-6 p-4 bg-blue-100 border border-blue-300 rounded-lg">
      <p class="font-semibold text-blue-800">Try resizing your browser window to see the effect!</p>
    </div>
  </div>

</body>
</html>

Customizing the Container

You can easily customize the container’s behavior in your tailwind.config.js file. Common customizations include adding default horizontal padding or disabling the centering behavior.

tailwind.config.js

module.exports = {
  theme: {
    container: {
      // You can add default padding here
      padding: '2rem',

      // You can disable centering by default
      center: true,

      // You can override the screen breakpoints for the container
      screens: {
        sm: '600px',
        md: '728px',
        lg: '984px',
        xl: '1240px',
        '2xl': '1496px',
      },
    },
  },
  plugins: [],
}