using-container-queries

Container queries enable components to respond to their parent container's width rather than the viewport. Use @container to wrap a component, then apply container-based utilities like @sm, @md, @lg to child elements, allowing the same component to adapt across cards, dashboards, and grids regardless of screen size.

Yes. Container queries in Tailwind v4 let you create reusable widgets that scale with their container context. Apply @container to a parent and use @{breakpoint} utilities on children to build components that work in any layout—sidebar, grid cell, or embedded card—without viewport dependencies.

Viewport media queries respond to screen size; container queries respond to parent container width. Container queries solve the limitation of viewport-dependent layouts by enabling components to adapt locally, making them portable across different container widths in the same page.

Named containers let you target specific parent containers with @container/{name} and @{breakpoint}/{name} utilities. This enables fine-grained control when multiple nested containers exist, allowing different child components to respond to different container contexts independently.

Yes. Mixed container-viewport queries let you layer both approaches—use @container utilities for local responsiveness and standard media query utilities for global viewport changes. This hybrid approach balances portability with device-level adaptations.

Container queries require Tailwind v4 and modern browser support. They work best for component-level adaptation but cannot replace viewport queries for full-page layout shifts. Performance depends on container nesting depth—excessive nesting may impact rendering.