# @tailwindcss/container-queries

> A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.

Latest version **0.1.1** (published 2023-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tailwindcss/container-queries
pnpm add @tailwindcss/container-queries
yarn add @tailwindcss/container-queries
bun add @tailwindcss/container-queries
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2023-03-31 |
| First published | 2022-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1434 |
| Maintainers | thecrypticace, reinink, adamwathan, bradlc, malfaitrobin |

## Links

- npm: https://www.npmjs.com/package/@tailwindcss/container-queries
- Repository: https://github.com/tailwindlabs/tailwindcss-container-queries
- Homepage: https://github.com/tailwindlabs/tailwindcss-container-queries#readme
- Issues: https://github.com/tailwindlabs/tailwindcss-container-queries/issues
- npm.io page: https://npm.io/package/@tailwindcss/container-queries

## Recent versions

- 0.1.1 (latest) — 2023-03-31
- 0.0.0-insiders.7a968b3 (insiders) — 2026-05-12
- 0.0.0-insiders.3c3dd3c — 2025-02-13
- 0.0.0-insiders.802c5d8 — 2025-02-13
- 0.0.0-insiders.ef92eba — 2024-12-26
- 0.0.0-insiders.f8d4307 — 2024-03-22
- 0.0.0-insiders.000b61b — 2024-01-22
- 0.0.0-insiders.a10d21f — 2023-12-05
- 0.0.0-insiders.c287ac7 — 2023-07-28
- 0.0.0-insiders.e53d76e — 2023-05-09
- 0.0.0-insiders.c996d7d — 2023-04-24
- 0.0.0-insiders.f8b51dd — 2023-03-31
- 0.0.0-insiders.005fbc3 — 2023-03-31
- 0.0.0-insiders.7404e48 — 2023-03-31
- 0.0.0-insiders.3a793f8 — 2023-03-31
- … 25 more at https://npm.io/package/@tailwindcss/container-queries/versions

## README

# @tailwindcss/container-queries

A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.

## Installation

Install the plugin from npm:

```sh
npm install @tailwindcss/container-queries
```

Then add the plugin to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/container-queries'),
    // ...
  ],
}
```

## Usage

Start by marking an element as a container using the `@container` class, and then applying styles based on the size of that container using the container variants like `@md:`, `@lg:`, and `@xl:`:

```html
<div class="@container">
  <div class="@lg:underline">
    <!-- This text will be underlined when the container is larger than `32rem` -->
  </div>
</div>
```

By default we provide [container sizes](#configuration) from `@xs` (`20rem`) to `@7xl` (`80rem`).

### Named containers

You can optionally name containers using a `@container/{name}` class, and then include that name in the container variants using classes like `@lg/{name}:underline`:

```html
<div class="@container/main">
  <!-- ... -->
  <div class="@lg/main:underline">
    <!-- This text will be underlined when the "main" container is larger than `32rem` -->
  </div>
</div>
```

### Arbitrary container sizes

In addition to using one of the [container sizes](#configuration) provided by default, you can also create one-off sizes using any arbitrary value:

```html
<div class="@container">
  <div class="@[17.5rem]:underline"></div>
    <!-- This text will be underlined when the container is larger than `17.5rem` -->
  </div>
</div>
```

### Removing a container

To stop an element from acting as a container, use the `@container-normal` class.

<div class="@container xl:@container-normal">
  <!-- ... -->
</div>

## Configuration

By default we ship with the following configured values:

| Name   | CSS                             |
| ------ | ------------------------------- |
| `@xs`  | `@container (min-width: 20rem)` |
| `@sm`  | `@container (min-width: 24rem)` |
| `@md`  | `@container (min-width: 28rem)` |
| `@lg`  | `@container (min-width: 32rem)` |
| `@xl`  | `@container (min-width: 36rem)` |
| `@2xl` | `@container (min-width: 42rem)` |
| `@3xl` | `@container (min-width: 48rem)` |
| `@4xl` | `@container (min-width: 56rem)` |
| `@5xl` | `@container (min-width: 64rem)` |
| `@6xl` | `@container (min-width: 72rem)` |
| `@7xl` | `@container (min-width: 80rem)` |

You can configure which values are available for this plugin under the `containers` key in your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      containers: {
        '2xs': '16rem',
      },
    },
  },
}
```

---
_Source: https://npm.io/package/@tailwindcss/container-queries · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._