Tailwind CSS Container
To make an element's width adjust to the current screen size in Tailwind CSS, you can combine responsive utility classes with the max-w-{breakpoint} class.
Basic usage
Using the container
The 'container' class makes sure that an element's maximum width is
the same as the minimum width of the current breakpoint. This is helpful
if you want to design for a specific range of screen sizes instead of
trying to adapt to a constantly changing screen size.
Please remember that Tailwind's container is different from other frameworks in that it does not automatically center itself and does not have any pre-set horizontal spacing.
<div class="container mx-auto">
<!-- ... -->
</div>To add horizontal padding, use the 'px-{size}' utilities:
<div class="container mx-auto px-4">
<!-- ... -->
</div>If you'd like to center your containers by default or include default horizontal padding, see the customization options below.
Applying conditionally
Responsive variants
The 'container' class also includes responsive variants like 'md:container' by default; these variants let you make something
behave like a container at only a certain breakpoint and beyond.
<!-- Full-width fluid until the `md` breakpoint, then lock to container -->
<div class="md:container md:mx-auto">
<!-- ... -->
</div>Customizing
Centering by default
One can set the ‘center’ value to ‘true’ in the ‘theme.container’ section
of the config file order to keep the container in the center.
// tailwind.config.js
module.exports = {
theme: {
container: {
center: true,
},
},
}Adding horizontal padding
‘padding’ option in the ‘theme.container’ section of your config file helps you
put default horizontal padding.
// tailwind.config.js
module.exports = {
theme: {
container: {
padding: '2rem',
},
},
}If you want 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: {
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '4rem',
xl: '5rem',
'2xl': '6rem',
},
},
},
};