容器

​基本用法

​使用容器

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 `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',
      },
    },
  },
};