Container

Container creates a CSS Container with inline-size.

Use Container Queries

No need to declare container-type all the time. Just use Container in a parent element and you’ll enable container queries for all children elements

<div class="Container">
  <div class="w-[75cqw]"> ... </div>
</div>

75% of the container’s width

Use container breakpoints with less effort

Want to make your component change orientation when the container is wider than 400px? Just use @bp4 which creates a breakpoint at 400px — courtesy of our Tailwind Layout Preset.

<div class="Container">
  <div class="Vertical @bp4:Horizontal">...</div>
</div>

Resize to see this work!

One

Two

Three

Basic Usage

Use Container whenever you need to create a CSS Container.

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

Usage with Macro Layouts

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

<div class="SimpleGrid [--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.

Note

For the Tailwind code to work, you must be using Tailwind’s container queries plugin which already included in our Tailwind Layout Preset.

<div class="Container">
  <div class="Vertical @md:Horizontal">...</div>
</div>

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

Configuring Container Breakpoints

You can configure the breakpoints for container queries in your tailwind.config.js file. Please refer to the Tailwind Container Query docs for more information.

module.exports = {
  theme: {
    extend: {
      containers: {
        '2xs': '16rem',
      },
    },
  },
}

Note

We recommend you to use our Layouts Preset because we’ve added a few extra container breakpoints for you.

Tailwind max-width container queries

Tailwind does not support max-width container queries in their plugin. We did not add support for them too at this point.

<!-- Does not work -->
<div class="@max-md:Horizontal">...</div>

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;
}

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Here’s the CSS for Container

.Container {
  container-type: inline-size;
}

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Container

Using Tailwind Container Queries

Variant	Description
`@<breakpoint>:<class>`	Creates a `min-width` breakpoint at `<breakpoint>`

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.