【Tailwind和訳】LAYOUT/Container

この記事について

この記事は、Layout/Containerの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Container

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

class	breakpoint	properties
container	None	width:100%;
	sm(640px)	max-width:640px;
	md(786px)	max-width:768px;
	1g(1024px)	max-width:1024px;
	x1(1280px)	max-width:1280px;
	2×1(1536px)	max-width:1536px

使用法

containerクラスは、要素のmax-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>

カスタマイズ

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

tailwind.config.js

module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

水平方向のパディング
デフォルトで水平パディングを追加するために、paddingはtheme.container構成ファイルのセクションでオプションを使用して、パディングの量を指定します。

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',
        '2xl': '6rem',
      },
    },
  },
};

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

tailwind.config.js

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

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

tailwind.config.js

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