Tailwind v4 Container Queries: A Practical Guide with Real Examples Container queries landed as first-class citizens in Tailwind CSS v4. The short version: you can now style an element based on the size of its parent container , not just the viewport. That unlocks truly reusable components that adapt to wherever you drop them. This guide shows the exact syntax, real-world patterns we use in every Craftly template, and the three gotchas that aren't in the docs. What problem container queries solve Before container queries, responsive design was anchored to viewport width. A card component on a full-width mobile layout and a card component tucked into a 300px sidebar on desktop would both get the same media-query breakpoints. The sidebar card looked broken. Container queries fix this by letting the card respond to its own available width instead. Move it from full-width to sidebar and it adapts, same component.…