Horizontally center `.container` in Tailwind CSS

When coming from other CSS frameworks like Bootstrap or Bulma the container class in Tailwind CSS might work a little different than expected. In Tailwind CSS the container element is not horizontally centered by default, in contrast to Bootstrap or Bulma.

Frameworks like Bootstrap or Bulma center the container by settings the left and right margin to auto. You can do the same in Tailwind by using the mx-auto class to set the horizontal margins of an element to auto.

<main class="container mx-auto">...</main>

Another option is to solve this in your tailwind.config.js file. See the example below:

module.exports = {
  future: {},
  purge: [],
  theme: {
    container: {
      center: true,
    },
  },
  variants: {},
  plugins: [],
};