Using Container Queries in Tailwind CSS
Set up and use CSS container queries in Tailwind CSS v3.2+ with the @container plugin, named containers, and responsive utility classes.
Integration Patterns
Detailed Explanation
Container Queries in Tailwind CSS
Tailwind CSS v3.2+ includes built-in support for container queries through the @container variant. This lets you use Tailwind's utility-first approach with container-based responsiveness.
Setup
Container query support is built into Tailwind CSS v3.2+. No additional plugins are needed.
Basic Usage
<!-- Define the container -->
<div class="@container">
<!-- Query the container -->
<div class="flex flex-col @md:flex-row @md:gap-4">
<img src="..." class="@md:w-48" />
<div class="@md:flex-1">...</div>
</div>
</div>
Default Breakpoints
Tailwind provides these container query breakpoints:
| Class | Width |
|---|---|
@xs |
20rem (320px) |
@sm |
24rem (384px) |
@md |
28rem (448px) |
@lg |
32rem (512px) |
@xl |
36rem (576px) |
@2xl |
42rem (672px) |
Named Containers
<div class="@container/sidebar">
<nav class="@md/sidebar:flex-col">...</nav>
</div>
Custom Breakpoints in tailwind.config.js
module.exports = {
theme: {
extend: {
containers: {
'card': '400px',
'panel': '600px',
},
},
},
}
Tailwind v4 Syntax
In Tailwind CSS v4, the syntax is streamlined:
<div class="@container">
<div class="@min-[400px]:grid-cols-2">...</div>
</div>
Key Differences from Responsive Breakpoints
md:flex-row= viewport media query@md:flex-row= container query (note the@prefix)
Use Case
Use this guide when implementing container queries in a Tailwind CSS project. The @container variant lets you apply utility classes based on a parent container's size instead of the viewport.