コンテナ

要素の幅を現在のブレークポイントに固定するためのコンポーネント

Class reference

ClassBreakpointProperties
.containerNonewidth: 100%;
sm (640px)max-width: 640px;
md (768px)max-width: 768px;
lg (1024px)max-width: 1024px;
xl (1280px)max-width: 1280px;

使用方法

.containerクラスは、要素のmax-widthを現在のブレークポイントのmin-widthと一致するように設定します。 これは、完全に流動的なビューポートに対応するのではなく、固定された画面サイズのセットを設計する場合に役立ちます。

あなたがこれまで他フレームワークで使用した可能性のあるコンテナーとは異なり、Tailwindのコンテナーは自動的に中央に配置されず、デフォルトで水平方向のパディングが組み込まれていません。

コンテナを中央に配置するには、.mx-autoユーティリティを使用します。

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

水平方向のパディングを追加するには、.px-{size}ユーティリティを使用します。

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

デフォルトでコンテナを中央に配置する場合、またはデフォルトの水平パディングを含める場合は、下部にあるcustomization optionsをご覧ください。

Responsive variants

containerクラスには、デフォルトでmd:containerのようなレスポンシブバリアントも含まれています。 これにより、特定のブレークポイント以上でのみコンテナのように動作させることができます。

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

Customizing

Centering by default

デフォルトでコンテナを中央に配置するには、設定ファイルのtheme.containerセクションでcenterオプションをtrueに設定します。

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

Horizontal padding

デフォルトで水平パディングを追加するには、構成ファイルの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',
      },
    },
  },
};

Disabling responsive variants

レスポンシブバリアントを無効にする場合は、tailwind.config.jsファイルのvariantsセクションでcontainerを空の配列に設定することで無効にできます。

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

Disabling entirely

プロジェクトで.containerクラスを使用する予定がない場合は、 構成ファイルのcorePluginsセクションでcontainerプロパティをfalseに設定することで完全に無効にできます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!