Prefer Container Queries

Components should respond to the space they are in, not to the viewport. A card that lives in a sidebar has maybe 300px of width even on a huge screen, and a viewport breakpoint like md:flex-row will get that wrong every time. Container queries fix this: the component asks "how wide am I?" instead of "how wide is the window?".

When writing responsive Tailwind, default to container queries. Viewport breakpoints are the exception, not the rule.

How it works

Mark the parent as a container, then use @-prefixed variants on its children:

<div class="@container">
  <div class="flex flex-col @md:flex-row @md:gap-6">
    <img class="w-full @md:w-48" />
    <div class="@md:flex-1">...</div>
  </div>
</div>