容器

​基本用法(Basic usage)

​使用容器(Using the container)

container 类将元素的 max-width 设置为与当前断点的 min-width 匹配。如果你更愿意为固定的一组屏幕尺寸进行设计，而不是尝试适应完全流动的视口，这会非常有用。

🌐 The container class sets the max-width of an element to match the min-width of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport.

请注意，与你在其他框架中可能使用的容器不同，Tailwind 的容器不会自动居中，也没有任何内置的水平内边距。

🌐 Note that unlike containers you might have used in other frameworks, Tailwind’s container does not center itself automatically and does not have any built-in horizontal padding.

要居中一个容器，请使用 mx-auto 工具类：

🌐 To center a container, use the mx-auto utility:

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

要添加水平内边距，请使用 px-* 工具：

🌐 To add horizontal padding, use the px-* utilities:

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

如果你希望默认情况下将容器居中或包含默认的水平内边距，请参阅下面的自定义选项。

🌐 If you’d like to center your containers by default or include default horizontal padding, see the customization options below.

​有条件地应用(Applying conditionally)

​响应变体(Responsive variants)

container 类还默认包括像 md:container 这样的响应式变体，它允许你使某个元素仅在特定断点及以上表现得像一个容器：

🌐 The container class also includes responsive variants like md:container by default that allow you to make something behave like a container at only a certain breakpoint and up:

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

​定制化(Customizing)

​默认居中(Centering by default)

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

🌐 To center containers by default, set the center option to true in the theme.container section of your config file:

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

​添加水平填充(Adding horizontal padding)

要默认添加水平内边距，请在配置文件的 theme.container 部分使用 padding 选项指定你希望的内边距量：

🌐 To add horizontal padding by default, specify the amount of padding you’d like using the padding option in the theme.container section of your config file:

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

如果你想为每个断点指定不同的内边距量，请使用对象来提供一个 default 值以及任何断点特定的覆盖设置：

🌐 If you want to specify a different padding amount for each breakpoint, use an object to provide a default value and any breakpoint-specific overrides:

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