Container
container creates a CSS Container with inline-size. This does the same thing as @container if you’re using Tailwind.
Easy way to use Container Queries
No need to declare container-type — 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>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 customizations.
<div class="container"> <div class="vertical @bp4:horizontal">...</div></div>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;}50% of the container’s width
Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
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;}50% of the container’s width
Here’s the CSS for Container
.container { container-type: inline-size;}Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
Here’s the CSS for Container
.container { container-type: inline-size;}