For over a decade, Responsive Web Design has relied on Media Queries (`@media`). We style elements based on the *viewport* width. But often, a component needs to adapt based on *where* it lives in the layout, not how wide the screen is. This is where **Container Queries** come in, and Tailwind CSS makes them incredibly easy to use via the `@tailwindcss/container-queries` plugin. ## Setup First, install the plugin: ```bash npm install @tailwindcss/container-queries ``` Then add it to your `tailwind.config.js`: ```js module.exports = { plugins: [ require('@tailwindcss/container-queries'), ], } ``` ## How It Works Container queries work in two steps: 1. **Mark a parent** as a container. 2. **Style the child** based on that container's width. ### Step 1: Variable Containers Mark an element as a container using the `@container` utility. ```html

``` ### Step 2: Querying the Container Use the `@` variants (like `@md:`, `@lg:`) instead of the standard media query variants (`md:`, `lg:`). ```html

``` In this example: * At small container widths, the flex direction is column. * When the *container* (not the screen!) is wider than `md` (usually ~20-24rem depending on config), it switches to row. ## Named Containers If you have nested containers, you might need to name them to target a specific ancestor. ```html ``` ## Why This Matters Container queries allow you to build truly portable components. A "Card" component can look one way in a narrow sidebar and another way in a main content grid, without you passing props or writing complex CSS overrides.

Tailwind CSS Container Queries- Sep 24, 2025

Tailwind CSS v4: The New and Improved Utility-First CSS Framework- Jul 07, 2023

Talk to me now if you need my help. Click here