Tailwind CSS 容器

容器

根據(jù)當前斷點固定元素寬度的組件。

使用方法

?container ?類設置一個元素的 ?max-width? 來匹配當前斷點的 ?min-width?。如果您想為一組固定的屏幕尺寸設計，而不是試圖適應一個完全流動的視窗，這很有用。

請注意，與您可能使用的過的其他框架中容器不同，Tailwind 的容器不會自動居中，也沒有任何內(nèi)置的水平方向的內(nèi)邊距。

要使一個容器居中，使用 ?mx-auto? 功能類：

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

要添加水平內(nèi)邊距，請使用 ?px-{size}? 功能類：

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

響應式變體

?container ?類還包括響應式變體，比如默認的 ?md:container?，它允許您讓某些東西只在某個斷點及以上表現(xiàn)得像一個容器：

<!-- 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,
    },
  },
}

水平內(nèi)邊距

要默認添加水平內(nèi)邊距，請在配置文件的 ?theme.container? 部分使用 ?padding ?選項指定您想要的內(nèi)邊距大?。?/p>

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

如果您想為每個斷點指定不同的內(nèi)邊距大小，可以使用一個對象來提供 ?default ?值和任何根據(jù)斷點指定的覆蓋：

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

禁用響應式變體

如果您想禁用響應式變體，您可以在您的 ?tailwind.config.js? 文件的 ?variants ?部分將 ?container ?設置為一個空數(shù)組：

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

完全禁用

如果您不打算在您的項目中使用 ?container ?類，您可以通過在配置文件的 ?corePlugins ?部分將 ?container ?屬性設置為 ?false ?來完全禁用它：

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