容器

​基本用法

​使用 container

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

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

​新增水平內距

若要預設新增水平內距，請在設定檔的 theme.container 區段中，使用 padding 選項指定所需的內距大小

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

如果你想為每個斷點指定不同的內距大小，請使用物件提供 default 值和任何斷點特定的覆寫

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