Tailwind CSS 容器

容器

根據(jù)當(dāng)前斷點(diǎn)固定元素寬度的組件。

使用方法

?container ?類設(shè)置一個(gè)元素的 ?max-width? 來匹配當(dāng)前斷點(diǎn)的 ?min-width?。如果您想為一組固定的屏幕尺寸設(shè)計(jì)，而不是試圖適應(yīng)一個(gè)完全流動的視窗，這很有用。

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

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

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

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

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

響應(yīng)式變體

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

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

自定義

默認(rèn)居中

為了使容器在默認(rèn)情況下居中，在配置文件的 ?theme.container? 部分將 ?center ?選項(xiàng)設(shè)置為 ?true?：

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

水平內(nèi)邊距

要默認(rèn)添加水平內(nèi)邊距，請?jiān)谂渲梦募?nbsp;?theme.container? 部分使用 ?padding ?選項(xiàng)指定您想要的內(nèi)邊距大?。?/p>

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

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

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

禁用響應(yīng)式變體

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

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

完全禁用

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

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