Container

    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 center a container, use the .mx-auto utility:

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

    If you’d like to center your containers by default or include default horizontal padding, see the customization options 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:

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

    1. // tailwind.config.js
    2.   theme: {
    3.     container: {
    5.     },
    6.   },
    7. }

    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:

    1. // tailwind.config.js
    2. module.exports = {
    3.   theme: {
    4.     container: {
    5.       padding: {
    6.         default: '1rem',
    7.         lg: '4rem',
    8.         xl: '5rem',
    9.       },
    11.   },
    12. };

    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:

    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:

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     corePlugins: {
    4.       // ...
    5. +     container: false,
    6.     }