Basic Usage

Use container whenever you need to create a CSS Container. This does the same thing as @container if you’re using Tailwind.

<div class="container">...</div>

<div class="@container">...</div>

Usage with Macro Layouts

If you use container with Macro layouts like grid-simple, put container on each grid item so your components can benefit from container queries and container units.

<div class="grid-simple [--cols:2]">
  <div class="container">
    <div class="component">...</div>
  </div>
  <div class="container">
    <div class="component">...</div>
  </div>
</div>

container Queries

You can use container queries once you add container to an ancestor element.

<div class="container">
  <div class="vertical @md:horizontal">...</div>
</div>

@container (inline-size > 768px) {
  .child {
    /* ...  */
  }
}

Configuring container breakpoints

You can configure tailwind container breakpoints with the container keyword.

@theme {
  /* Example: --container-md: 768px; */
  --container-<breakpoint>: <width>;
}

Container Query Units

You can use container query units once you have a container active in an ancestor element.

<div class="container">
  <div class="vertical w-[50cqw]">...</div>
</div>

.child {
  width: 50cqw;
}