Container

A component for fixing an element’s width to the current breakpoint.

Default class reference

Usage

The 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 screen 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.

Responsive variants

The container class also includes responsive variants like md:container by default that allow you to make something behave like a container at only a certain breakpoint and up:

<!-- Full-width fluid until the `lg` breakpoint, then lock to container -->
<div class="md:container md:mx-auto">
  <!-- ... -->
</div>

Customizing

Centering by default

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

// tailwind.config.js
module.exports = {
  theme: {
    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 theme.container section of your config file:

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}

If you want to specify a different padding amount for each breakpoint, use an object to provide a default value and any breakpoint-specific overrides:

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
};

Disabling responsive variants

If you’d like to disable the responsive variants, you can do so using by setting container to an empty array in the variants section of your tailwind.config.js file:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
+     container: [],
    }
  }

Disabling entirely

If you don’t plan to use the container class in your project, you can disable it entirely by setting the container property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     container: false,
    }
  }

←Preflight   Box Sizing→