Container

Container

一个组件，用于将元素的宽度固定在当前断点处。

基本用法

使用 Container

容器类将元素的最大宽度(max-width)设置为与当前断点的最小宽度(min-width)相匹配。这对于喜欢设计固定屏幕尺寸而不是试图适应完整流体视口的情况非常有用。

请注意，与其他框架中可能使用的容器不同，Tailwind 的容器不会自动居中自身，并且没有任何内置的水平填充。

要使容器居中，请使用 mx-auto 实用程序：

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

要添加水平填充，请使用 px-{size} 实用程序：

<div class="container mx-auto px-4">
  <!-- ... -->
</div>

如果您想要默认居中容器或包含默认的水平填充，请参阅下面的自定义选项。

有条件地应用

响应式变体

容器类还包括响应式变体，如默认情况下包括 md:container ,允许您在仅在某个断点及更高版本时使某物表现得像一个容器：

<!-- Full-width fluid until the `md` breakpoint, then lock to container -->
<div class="md:container md:mx-auto">
  <!-- ... -->
</div>

自定义

默认居中对齐

要默认居中容器，请在配置文件的主题 .container 部分将 center 选项设置为 true:

module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

增加水平间距

要默认添加水平填充，请在配置文件的主题 .container 部分使用 padding 选项指定您想要的填充量：

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

如果您想为每个断点指定不同的填充量，请使用对象提供默认值并为任何断点特定的覆盖：

module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
};