Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dgknca/tailwindcss-container-query

A plugin that provides CSS Container Queries for tailwindcss.
https://github.com/dgknca/tailwindcss-container-query

tailwindcss tailwindcss-plugin

Last synced: 15 days ago
JSON representation

A plugin that provides CSS Container Queries for tailwindcss.

Awesome Lists containing this project

README

        

# tailwindcss-container-query

A plugin that provides CSS Container Queries.

## BEFORE STARTING

This plugin relies on [container-query-polyfill](https://github.com/GoogleChromeLabs/container-query-polyfill). **You must add it to make this plugin work.** We have to rely on polyfills until all browsers have implemented them. [see the support table](https://caniuse.com/css-container-queries)

## Installation

Install the plugin from npm:

```sh
# Using npm
npm install tailwindcss-container-query

# Using Yarn
yarn add tailwindcss-container-query
```

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

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

## Usage

Container Queries up to 10 are generated by default:

| Class | Query |
| --- | --- |
| `cq-w-4` | `@container (min-width: 64px)` |
| `cq-w-6` | `@container (min-width: 96px)` |
| `cq-w-9` | `@container (min-width: 144px)` |
| `cq-w-16` | `@container (min-width: 256px)` |
| `cq-w-22` | `@container (min-width: 352px)` |
| `cq-h-4` | `@container (min-height: 64px)` |
| `cq-h-6` | `@container (min-height: 96px)` |
| `cq-h-9` | `@container (min-height: 144px)` |
| `cq-h-16` | `@container (min-height: 256px)` |
| `cq-h-22` | `@container (min-height: 352px)` |

Utilities:

| Class | Property |
| --- | --- |
| `container-type-size` | `container-type: size` |
| `container-type-inline-size` | `container-type: inline-size` |
| `container-type-block-size` | `container-type: block-size` |
| `container-type-style` | `container-type: style` |
| `container-type-state` | `container-type: state` |

There are no any `container-name` utilities by default. You should define your own utilities in `tailwind.config.js`.

## Example Usage

```html


```

Output:

```css
@container (min-width: 96px) {
.cq-w-6\:bg-yellow-400 {
--tw-bg-opacity: 1;
background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}
}
```

#### You can use arbitrary variants too. (You should be using v3.1.0 or higher!)

```html


```

Output:

```css
@container (min-width: 238px) {
.cq-w-\[238px\]\:bg-yellow-400 {
--tw-bg-opacity: 1;
background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}
}
```

## Using Container Names

```html


```

```js
// tailwind.config.js
module.exports = {
theme: {
containerName: {
sb: 'sidebar'
},
// ...
}
}
```

Output:

```css
@container sidebar (min-width: 96px) {
.cq-w-sb-6\:bg-yellow-400 {
--tw-bg-opacity: 1;
background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}
}
```

## Configuration

You can configure which values and variants are generated by this plugin under the `containerQuery`, `containerType` and `containerName` keys in your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
theme: {
// P.S. Container Query thresholds can only be specified using pixels because of the polyfill I recommended.
containerQuery: {
xs: '120px',
sm: '240px',
md: '360px',
},
containerType: {
size: 'size',
}
}
}
```

## [Demo Page](https://dgknca.github.io/tailwindcss-container-query/)