How to use Container in Tailwind CSS?

Centered max-width containers.

What You'll Learn

Container class
Centering
Customization

Basic Container

index.htmlHTML

<div class="container mx-auto px-4">
  Centered content with padding
</div>

Container Breakpoints

Container sets max-width at each breakpoint:

Breakpoint	Max Width
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Configuration

code.jsJavaScript

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,  // Auto-center
      padding: '1rem',  // Default padding
      screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1400px',  // Custom 2xl
      },
    },
  },
}

Without Container Class

index.htmlHTML

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  Manual container
</div>

How does Object Fit work in Tailwind?

What are Arbitrary Values in Tailwind?