Tailwind CSS 容器

容器

根据当前断点固定元素宽度的组件。

使用方法

​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​：

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

水平内边距

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

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}

如果您想为每个断点指定不同的内边距大小，可以使用一个对象来提供 ​default ​值和任何根据断点指定的覆盖：

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

禁用响应式变体

如果您想禁用响应式变体，您可以在您的 ​tailwind.config.js​ 文件的 ​variants ​部分将 ​container ​设置为一个空数组：

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
     container: [],
    }
  }

完全禁用

如果您不打算在您的项目中使用 ​container ​类，您可以通过在配置文件的 ​corePlugins ​部分将 ​container ​属性设置为 ​false ​来完全禁用它：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     container: false,
    }
  }