Container query wrapper component.
Wraps children with CSS @container so descendant elements can use container
query breakpoints (@sm:, @md:, @lg:, etc.) in their Tailwind classes.
In Tailwind CSS v4, the @container utility class automatically sets
container-type: inline-size. Named containers use @container/{name}.
For size containment (both axes), an inline style is applied.
Examples
<%!-- Basic container query context --%>
<.container_query_wrap>
<div class="@md:flex @md:gap-4">
<p>Responds to container width, not viewport.</p>
</div>
</.container_query_wrap>
<%!-- Named container for targeted queries --%>
<.container_query_wrap name="sidebar">
<nav class="@sm/sidebar:flex-col @lg/sidebar:flex-row">
...
</nav>
</.container_query_wrap>
<%!-- Size containment (both inline and block axes) --%>
<.container_query_wrap type={:size}>
<div class="@md:grid @md:grid-cols-2">
...
</div>
</.container_query_wrap>Summary
Functions
Renders a container query wrapper.
Functions
Renders a container query wrapper.
Attributes
name(:string) - Optional container name for named queries (@container/name). Defaults tonil.type(:atom) - Containment type::inline_size(width only) or:size(both axes). Defaults to:inline_size. Must be one of:inline_size, or:size.class(:string) - Additional CSS classes merged via cn/1. Defaults tonil.- Global attributes are accepted. HTML attributes forwarded to the root element.
Slots
inner_block(required) - Content that can use container query breakpoints.