响应式设计 · 容器

什么是容器

container 容器是根据当前断点固定元素宽度的组件。一般情况下，最外层核心轮廓我们建议使用 container 样式。

使用方法

container 类设置一个元素的 max-width 来匹配当前断点的 min-width。如果您想为一组固定的屏幕尺寸设计，而不是试图适应一个完全流动的视窗，这很有用。
请注意，Tailwind 的容器不会自动居中，也没有任何内置的水平方向的内边距，要使一个容器居中，使用 mx-auto 功能类：

<div class="container mx-auto">
  <!-- ... -->
</div>
复制

容器定制

默认居中

在配置文件的 theme.container 部分将 center 选项设置为 true

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}
复制

水平内边距

要默认添加水平内边距，请在配置文件的 theme.container 部分使用 padding 选项指定您想要的内边距大小：

module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}
复制

断点模式

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
};
复制