Container

Class reference

Tailwind's .container class sets the max-width of an element to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport.

Note that unlike containers you might have used in other frameworks, Tailwind's container does not center itself automatically and does not have any built-in horizontal padding.

To center a container, use the .mx-auto utility:

<div class="container mx-auto">
  <!-- ... -->
</div>

To add horizontal padding, use the .px-{size} utilities:

<div class="container mx-auto px-4">
  <!-- ... -->
</div>

If you'd like to center your containers by default or include default horizontal padding, see the customization options below.

Customizing

Centering by default

To center containers by default, set the center option to true in the plugins section of your config file:

// ...

module.exports = {
  // ...

  plugins: [
    require('tailwindcss/plugins/container')({
      center: true,
    })
  ],
}

Horizontal padding

To add horizontal padding by default, specify the amount of padding you'd like using the padding option in the plugins section of your config file:

// ...

module.exports = {
  // ...

  plugins: [
    require('tailwindcss/plugins/container')({
      padding: '2rem',
    })
  ],
}

Disabling

Unlike most of Tailwind's other styles, the container component is included as a built-in plugin rather than a traditional utility module. To disable it, remove the plugin from the plugins section of your config file: