Container Component
Learn how to use Tailwind's container utility to create responsive, centered layouts for your pages and sections.
Usage
The container utility is the foundation of every Tailwind layout. It centers content horizontally and provides responsive breakpoints for different viewport sizes.
Basic Example
The container class applies mx-auto to center the element horizontally and sets max-widths based on the current screen size.
Responsiveness
When to Use Containers
- • For full-width page layouts
- • When centering large sections of content
- • Creating consistent spacing for your content
Customization
You can customize the container's maximum widths in your Tailwind configuration to match your design system.
Configuration
// tailwind.config.js
module.exports = {
theme: {
container: {
center: true,
padding: '3rem',
screens: {
'sm': '640px',
'md': '768px',
'lg': '1200px',
'xl': '1400px'
}
}
}
}
Available Options
Custom Breakpoints
Default values include:
Custom values should match your design's content maximum widths
Best Practices
Nested Containers
Avoid nesting containers deeply as they can restrict content unnecessarily. Use padding or margin instead when needed.
Mobile First
Start with smaller breakpoints and progressively enhance for larger screens. This aligns with Tailwind's responsive system.
Live Demo
Related Components
Ready to Master Tailwind Containers?
Build responsive layouts with confidence using this essential layout tool.