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>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 customizations.
<div class="container"> <div class="vertical @bp4:horizontal">...</div></div> Resize to see this work!
One
Two
Three