Container Configuration in Tailwind Config

Container Configuration

The container utility in Tailwind sets max-widths at each breakpoint. Customize it to match your design's content width.

Basic Container Config

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
      padding: "1rem",
    },
  },
};

This centers the container and adds 1rem horizontal padding at all sizes.

Responsive Padding

Different padding for different screen sizes:

container: {
  center: true,
  padding: {
    DEFAULT: "1rem",
    sm: "2rem",
    lg: "4rem",
    xl: "5rem",
    "2xl": "6rem",
  },
},

Custom Max-widths

Override the max-width at each breakpoint:

container: {
  center: true,
  screens: {
    sm: "640px",
    md: "768px",
    lg: "1024px",
    xl: "1140px",    // Narrower than default
    "2xl": "1280px", // Match common design width
  },
},

Using Container Without Plugin

If you prefer not to use the built-in container, define your own:

.wrapper {
  @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
}

When to Customize

The default container matches Tailwind's default breakpoints. Customize it when:

• Your design uses a narrower max-width (e.g., 1140px instead of 1280px)
• You need different padding at different sizes
• Your breakpoints are custom