根据当前断点固定元素宽度的组件。
container 类设置一个元素的 max-width 来匹配当前断点的 min-width。如果您想为一组固定的屏幕尺寸设计，而不是试图适应一个完全流动的视窗，这很有用。
请注意，与您可能使用的过的其他框架中容器不同，Tailwind 的容器不会自动居中，也没有任何内置的水平方向的内边距。
要使一个容器居中，使用 mx-auto 功能类：
<div class="container mx-auto">
<!-- ... -->
</div>要添加水平内边距，请使用 px-{size} 功能类：
<div class="container mx-auto px-4">
<!-- ... -->
</div>如果您想让您的容器默认居中或包含默认的水平内边距，请看下面的 自定义选项。
container 类还包括响应式变体，比如默认的 md:container，它允许您让某些东西只在某个断点及以上表现得像一个容器：
<!-- Full-width fluid until the `lg` breakpoint, then lock to container -->
<div class="md:container md:mx-auto">
<!-- ... -->
</div>为了使容器在默认情况下居中，在配置文件的 theme.container 部分将 center 选项设置为 true：
// tailwind.config.js
module.exports = {
theme: {
container: {
center: true,
},
},
}要默认添加水平内边距，请在配置文件的 theme.container 部分使用 padding 选项指定您想要的内边距大小：
// tailwind.config.js
module.exports = {
theme: {
container: {
padding: '2rem',
},
},
}如果您想为每个断点指定不同的内边距大小，可以使用一个对象来提供 default 值和任何根据断点指定的覆盖：
// tailwind.config.js
module.exports = {
theme: {
container: {
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '4rem',
xl: '5rem',
'2xl': '6rem',
},
},
},
};如果您想禁用响应式变体，您可以在您的 tailwind.config.js 文件的 variants 部分将 container 设置为一个空数组：
// tailwind.config.js
module.exports = {
variants: {
// ...
+ container: [],
}
}如果您不打算在您的项目中使用 container 类，您可以通过在配置文件的 corePlugins 部分将 container 属性设置为 false 来完全禁用它：
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ container: false,
}
}