Container container
A responsive container that sets max-width at different breakpoints for optimal content layout across all screen sizes.
Container Breakpoints
Live Examples
Basic Container
This content is inside a container
<div class="container">
Content automatically centers and has responsive max-width
</div> Centered Container
Centered container with mx-auto
<div class="container mx-auto">
Horizontally centered content
</div> Container with Responsive Padding
Container with responsive horizontal padding
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
Responsive padding for better mobile experience
</div> Nested Layout Example
Header Section
Full-width header content
Column 1
Column 2
<div class="container mx-auto px-4">
<header>Header content</header>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>Column 1</div>
<div>Column 2</div>
</div>
</div> Container vs Full Width
Full Width (no container)
This content spans the full width of its parent
With Container
This content is constrained by container max-widths
<!-- Full width -->
<div class="bg-red-500">Full width content</div>
<!-- Container constrained -->
<div class="container mx-auto bg-blue-500">Container content</div> Common Usage Patterns
🏠 Page Layout
Wrap main page content for consistent max-widths across breakpoints.
<main class="container mx-auto px-4"> 📄 Article Content
Constrain article width for optimal reading experience.
<article class="container mx-auto max-w-4xl"> 🎯 Hero Sections
Center hero content while maintaining responsive behavior.
<section class="container mx-auto text-center"> 🧩 Component Wrappers
Wrap components that need consistent width constraints.
<div class="container mx-auto py-12"> 📱 Mobile-First
Combine with responsive padding for mobile optimization.
<div class="container mx-auto px-4 sm:px-6"> 🎨 Design Systems
Create consistent spacing and alignment across components.
<div class="container mx-auto space-y-8"> Advanced Examples
Breakout Sections
Container content
Full-width breakout section
Back to container
<div class="container mx-auto">Normal content</div>
<div class="w-full">Full-width section</div>
<div class="container mx-auto">Back to container</div> Custom Max Width
Container with custom max-width
<div class="container mx-auto max-w-2xl">
Content with custom maximum width
</div> Explore Breakpoints
Click on any breakpoint below to learn about responsive design patterns, use cases, and best practices for that specific screen size.
Best Practices & Tips
✅ Do
- • Use
mx-autoto center containers - • Add responsive padding with
px-4 sm:px-6 lg:px-8 - • Combine with max-width utilities for custom constraints
- • Use for main content areas and page layouts
- • Test across different screen sizes
- • Consider content hierarchy and reading experience
❌ Don't
- • Nest containers unnecessarily
- • Use without considering mobile experience
- • Forget to add horizontal padding on mobile
- • Apply to elements that need full width
- • Use for small components that don't need constraints
- • Override container styles without good reason
Customizing Container
📝 Tailwind Config
Customize container behavior in your tailwind.config.js:
module.exports = {
theme: {
container: {
center: true,
padding: '2rem',
}
}
} 🎯 Custom Screens
Define custom breakpoints for container:
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1400px'
}