Viewport queries versus container queries
Viewport breakpoints respond to the browser window. Container queries respond to the size of a component's containing element. Container queries are valuable for reusable components that may appear in different layouts.
Tailwind syntax
Add @container to the parent and use variants such as @sm:, @md: or arbitrary container sizes on descendants.
Why this matters for components
A card should often change its internal layout based on the space available to the card, not on whether the entire browser is 768px wide.
ADVERTISEMENT