Container queries intro

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

advanced

This lesson

An orientation to this Tailwind CSS lesson—scope, vocabulary, and what you will practice next.

You need a clear map of the Tailwind CSS track so later lessons do not feel like isolated tricks.

You will apply Container queries intro in contexts like: React/Vue/Next apps, marketing sites, design systems, and rapid prototypes where consistency and speed matter.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs. Also open the interview prep blocks.

Start here at the beginning of the tailwind-css track before skipping ahead.

Media queries respond to the viewport. Container queries respond to a parent’s width—ideal for cards reused in sidebars and main columns.

Tailwind v3.2+ support

Mark a container with @container (via plugin in v3, built-in in v4). Child utilities use @md: style variants such as @md:flex-row when the container crosses a threshold—not when the whole page does.

CDN playground note

The CDN build supports container queries in recent versions. Enable the container-queries plugin in config when self-hosting:

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

Important interview questions and answers

Q: md: vs @md:?
A: md: watches viewport width; @md: watches the nearest @container ancestor.
Q: When are container queries worth it?
A: Reusable components whose layout should adapt to available space, not global screen size.

Self-check

Why might a card stay narrow in a sidebar and wide in main content?
What class marks an element as a query container?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Where would container queries beat viewport breakpoints?
What component owns the container query?

No discussion yet. Be the first to ask a question.