Container 容器

用于将元素的宽度固定到当前断点的组件。

Class	Breakpoint	Properties
container	None	width: 100%;
	sm (640px)	max-width: 640px;
	md (768px)	max-width: 768px;
	lg (1024px)	max-width: 1024px;
	xl (1280px)	max-width: 1280px;
	2xl (1536px)	max-width: 1536px;

基本用法

使用容器

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 ，允许您在特定断点及更高的情况下使某些内容表现得像一个容器：

<!-- 全宽流体直到`md`断点，然后锁定到容器 -->
<div class="md:container md:mx-auto">
  <!-- ... -->
</div>

定制化

默认居中

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

tailwind.config.js

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

添加水平填充

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

tailwind.config.js

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

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

tailwind.config.js

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