Center Tailwind Container and add Padding

By default Tailwind’s container does not center itself automatically and does not have any built-in horizontal padding.

Centering the Container

To center the container add the mx-auto utility

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

Center Container by Default

If you would like to configure tailwind to center the container by default for all its occurrences. You can do so by setting the center option to true in the theme.container section of your config file.

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

Add Padding to the Container

To add padding to the container use px-{size} property

<div class="container px-5">
  <!-- ... -->
</div>

Add Horizontal padding by default

If you would like to configure tailwind to add horizontal padding the container by default for all its occurrences, you can do so using padding option in the theme.container section of your config file:

module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}