Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 13 days ago
JSON representation
A plugin that provides CSS Container Queries for tailwindcss.
- Host: GitHub
- URL: https://github.com/dgknca/tailwindcss-container-query
- Owner: dgknca
- License: mit
- Created: 2021-12-07T19:35:30.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-06-24T16:24:11.000Z (over 2 years ago)
- Last Synced: 2024-08-01T17:21:29.000Z (3 months ago)
- Topics: tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage: https://dgknca.github.io/tailwindcss-container-query/
- Size: 188 KB
- Stars: 88
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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/)