コンテナ

​基本的な使用方法

​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',
    },
  },
}

ブレークポイントごとに異なるパディング量を指定する場合は、オブジェクトを使用してデフォルト値とブレークポイント固有のオーバーライドを提供します。

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