容器

​基础用法

​使用容器

container 类将元素的 max-width 设置为与当前断点的 min-width 匹配。如果您希望针对一组固定的屏幕尺寸进行设计，而不是尝试适应完全流畅的视口，那么此功能非常有用。

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

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

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

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

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

如果您希望默认将容器居中或包含默认水平填充，请参阅下面的 customization options。

​有条件申请

​响应式变体

container 类还默认包含响应式变体，例如 md:container，可让您使某些对象仅在某个断点及以上表现得像容器：

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

​定制

​默认居中

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

​添加水平填充

要默认添加水平填充，请使用配置文件的 theme.container 部分中的 padding 选项指定所需的填充量：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}

如果要为每个断点指定不同的填充量，请使用对象提供 default 值和任何特定于断点的覆盖：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
};