Container

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

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

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:

tailwind.config.js

module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

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 = {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
};