https://github.com/tailwindlabs/tailwindcss-container-queries

A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.
https://github.com/tailwindlabs/tailwindcss-container-queries

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/tailwindlabs/tailwindcss-container-queries
• Owner: tailwindlabs
• License: mit
• Created: 2022-10-12T10:39:32.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-12-26T22:08:04.000Z (19 days ago)
• Last Synced: 2025-01-03T00:09:31.676Z (12 days ago)
• Language: TypeScript
• Homepage:
• Size: 57.6 KB
• Stars: 1,312
• Watchers: 7
• Forks: 39
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-tailwindcss - Container queries - Provides utilities for container queries. (Plugins)

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 -D @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



  


    

  



```


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



  

  


    

  



```


### 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



  


    

  



```


### Removing a container

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



  



### With a prefix

If you have configured Tailwind to use a prefix, make sure to prefix both the `@container` class and any classes where you are using a container query modifier:

```html



  

  


    

  



```


## Configuration

By default we ship with the following configured values:

| Name   | CSS                                          |

| ------ | -------------------------------------------- |

| `@xs`  | `@container (min-width: 20rem /* 320px */)`  |

| `@sm`  | `@container (min-width: 24rem /* 384px */)`  |

| `@md`  | `@container (min-width: 28rem /* 448px */)`  |

| `@lg`  | `@container (min-width: 32rem /* 512px */)`  |

| `@xl`  | `@container (min-width: 36rem /* 576px */)`  |

| `@2xl` | `@container (min-width: 42rem /* 672px */)`  |

| `@3xl` | `@container (min-width: 48rem /* 768px */)`  |

| `@4xl` | `@container (min-width: 56rem /* 896px */)`  |

| `@5xl` | `@container (min-width: 64rem /* 1024px */)` |

| `@6xl` | `@container (min-width: 72rem /* 1152px */)` |

| `@7xl` | `@container (min-width: 80rem /* 1280px */)` |

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',

      },

    },

  },

}

```