响应式设计 · 容器

什么是容器

container 容器是根据当前断点固定元素宽度的组件。一般情况下,最外层核心轮廓我们建议使用 container 样式。

使用方法

container 类设置一个元素的 max-width 来匹配当前断点的 min-width。如果您想为一组固定的屏幕尺寸设计,而不是试图适应一个完全流动的视窗,这很有用。
请注意,Tailwind 的容器不会自动居中,也没有任何内置的水平方向的内边距,要使一个容器居中,使用 mx-auto 功能类:

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

容器定制

默认居中

在配置文件的 theme.container 部分将 center 选项设置为 true

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

水平内边距

要默认添加水平内边距,请在配置文件的 theme.container 部分使用 padding 选项指定您想要的内边距大小:

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

断点模式

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