Use container queries for component-first responsiveness

Responsive design often uses global breakpoints (sm:, md:, etc.).
But sometimes a component should adapt to its parent container, not the whole viewport.

That’s where container queries come in, which has become a widely supported a CSS feature. Tailwind makes them easy to use:

<div className="@container">
    <div className="@md:text-xl @lg:text-2xl">
        I resize based on my parent width, not the window size!
    </div>
</div>

How it works:

• Add @container to the parent element
• Use @ prefixes (@md:, @lg:) for container-based breakpoints

This makes components truly reusable — they respond correctly wherever they’re placed, not just at global screen sizes.

Great for dashboards, cards, or nested layouts where viewport breakpoints aren’t enough.

For a more detailed explanation, you can check out the Tailwind CSS Container Queries documentation.