Tailwind:Container

lastmod 2023-03-09created 2023-03-094 edits

A component for fixing an element's width to the current Breakpoint.

container

Usage

The container class sets the max-width of an element to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport.

Unlike containers you might have used in other frameworks, Tailwind's container does not center itself automatically and does not have any built-in horizontal padding.

To center a container, use the mx-auto utility:

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

To add horizontal padding, use the px-{size} utilities.

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

Responsive variants

The container class also includes responsive variants like md:container by default, which let you make something behave like a container only at a certain breakpoint and up.

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

See also

• Tailwind

Favorite site

• Container - Tailwind CSS