Container Queries
Definition
A revolutionary CSS feature (available in Tailwind via an official plugin) that allows elements to change their layout based on the size of their PARENT container, rather than the size of the entire browser window.
Explain Like I'm New
Standard media queries (`md:`) look at the Browser Width. If the browser is 1000px wide, the card is horizontal. But what if you put that card inside a tiny 300px sidebar? It will stay horizontal and break the layout. Container Queries (`@md:`) look at the Parent Width. The card is smart enough to realize it is inside a tiny sidebar, and switches to a vertical layout.
Real World Example
Building a `<ProductCard>` component that looks like a vertical poster when placed in a grid, but morphs into a horizontal banner when placed inside a wide page header.
Common Use Cases
- •Ultra-reusable components
- •Micro-frontends
- •Complex dashboard layouts
Interactive Example
Interview Questions
basic
- Are container queries built into Tailwind core, or do they require an official plugin?
intermediate
- What class MUST you place on a parent element to establish it as a container that its children can query?