Container

A structural component that constrains content width and applies responsive margins to maintain layout consistency.

Sizes

Use the container-{size} class to control the component size.

Size values can include:xssmmdlgxl.

For more information on all available sizing utilities, visit Tailwind

Customizing

globals.css


:root {
  --ex-container-max-w-xs: var(--container-xs);
  --ex-container-max-w-sm: var(--container-sm);
  --ex-container-max-w-md: var(--container-md);
  --ex-container-max-w-lg: var(--container-lg);
  --ex-container-max-w-xl: var(--container-xl);
}

API

Element	Selector
`Container`	`.ex-container`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`