Container

A container is a wrapper that helps you center and pad your content, and it's great for laying out your page.

If you are using Tailwind v4, please refer to the 2.x documentation. This documentation assumes you are using Tailwind v3.

Installation

If you hit any issues, make sure you check out the installation guide here.

Manual Installation

Intents

Containers come in two variants: constrained and padded-content. The constrained variant doesn't have padding on mobile view, while the padded-content variant has padding on both mobile and desktop. And the default variant is padded-content. If you want to change the variant, you can use the intent prop.

<Container intent="constrained" />