Tailwind `.container` the right way!

This article has been originally posted on my blog.

The container is just a div you can style with CSS. You can give it a fixed width, paddings on the inline edges and center it with margins. and it comes by with Tailwind's default configuration.

The container is just a normal div you can style with CSS. You can give it a fixed width, horizontal padding and center it with margin to allow for more sophisticated CSS styling.

And it comes by with Tailwind's default configuration as a component for fixing an element's width to the current breakpoint:

// tailwind.config.js
module.exports = {
  theme: {
    container: {},
  },
};

But it comes with no more than the fixed width, which makes the containers neither centered nor having horizontal padding as we used to know with previous CSS frameworks. But since Tailwind is a utility-first CSS framework we have to do something like this:

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

By using the previous example, you just had your container fixed in the center with some padding on each side. But what if you needed to change the px-4 to px-6 on your entire project, you will have to find every single container on your project and change manually.

Customizing

The ideal way to avoid this issue is by customizing the built-in options of the container component:

// tailwind.config.js
module.exports = {
  theme: {
    container: (theme) => ({
      // To center containers by default
      center: true,

      // To add horizontal padding by default
      padding: theme("spacing.4"),
    }),
  },
};

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: (theme) => ({
      padding: {
        DEFAULT: theme("spacing.4"),
        sm: theme("spacing.5"),
        lg: theme("spacing.6"),
        xl: theme("spacing.8"),
      },
    }),
  },
};

You either use theme or pass specific values:

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

Using addComponents

For more flexibility with the container, you can just disable it by setting the .container property to false in the corePlugins section of your config file:

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

And then create your custom component from scratch with the needed CSS, using theme function to get the theme values:

// tailwind.config.js
module.exports = {
  plugins: [
    ({ addComponents, theme }) => {
      addComponents({
        ".container": {
          marginInline: "auto",
          paddingInline: theme("spacing.4"),
          maxWidth: theme("screens.sm"),

          // Breakpoints
          "@screen sm": {
            maxWidth: theme("screens.sm"),
          },
          "@screen md": {
            maxWidth: theme("screens.md"),
          },
        },
      });
    },
  ],
};

One more benefit you get out of this approach is setting a custom container max-width, as you can see in my personal website the container is always small.

Using @apply

You can also use @apply inside your components and this is how you can do it:

// tailwind.config.js
module.exports = {
  plugins: [
    ({ addComponents, theme }) => {
      addComponents({
        ".container": {
          "@apply px-4 mx-auto": {},
          maxWidth: theme("screens.sm"),
        },
      });
    },
  ],
};