Container queries in Tailwind with @tailwindcss/container-queries

A reusable component needs to change layout based on its own container width, not the viewport. Standard Tailwind breakpoints are viewport-based and cause the component to behave incorrectly when placed in different layout contexts.

Install the container queries plugin and use @container and @lg/@md style variants:

npm install @tailwindcss/container-queries

plugins: [require('@tailwindcss/container-queries')]

<div class="@container">
  <div class="grid grid-cols-1 @lg:grid-cols-3 @md:grid-cols-2">
    <div class="p-4 @sm:p-6">Card</div>
  </div>
</div>

Named containers:

<div class="@container/sidebar">
  <div class="@lg/sidebar:hidden">Collapsed sidebar content</div>
</div>

CSS Container Queries allow elements to respond to the size of their containing block rather than the viewport, making components genuinely reusable across different layout positions.

When building reusable components that need to adapt to their container size, not viewport size.