├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── demo
├── README.md
├── index.html
├── output.css
└── style.css
├── dist
├── .gitignore
└── .npmignore
├── examples
├── html
│ ├── .gitignore
│ ├── .prettierrc
│ ├── README.md
│ ├── package.json
│ ├── postcss.config.js
│ ├── src
│ │ ├── index.html
│ │ ├── output.css
│ │ └── style.css
│ ├── tailwind.config.js
│ └── yarn.lock
└── nextjs
│ ├── .gitignore
│ ├── README.md
│ ├── next.config.js
│ ├── package.json
│ ├── pages
│ ├── _app.js
│ └── index.js
│ ├── postcss.config.js
│ ├── styles
│ └── global.css
│ ├── tailwind.config.js
│ └── yarn.lock
├── package.json
├── scripts
└── build.js
├── src
└── index.js
├── tailwind.config.js
├── test
└── index.test.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | demo
2 | examples
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Doğukan Çavuş
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # tailwindcss-container-query
2 |
3 | A plugin that provides CSS Container Queries.
4 |
5 | ## BEFORE STARTING
6 |
7 | 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)
8 |
9 | ## Installation
10 |
11 | Install the plugin from npm:
12 |
13 | ```sh
14 | # Using npm
15 | npm install tailwindcss-container-query
16 |
17 | # Using Yarn
18 | yarn add tailwindcss-container-query
19 | ```
20 |
21 | Then add the plugin to your `tailwind.config.js` file:
22 |
23 | ```js
24 | // tailwind.config.js
25 | module.exports = {
26 | theme: {
27 | // ...
28 | },
29 | plugins: [
30 | require('tailwindcss-container-query'),
31 | // ...
32 | ],
33 | }
34 | ```
35 |
36 | ## Usage
37 |
38 | Container Queries up to 10 are generated by default:
39 |
40 | | Class | Query |
41 | | --- | --- |
42 | | `cq-w-4` | `@container (min-width: 64px)` |
43 | | `cq-w-6` | `@container (min-width: 96px)` |
44 | | `cq-w-9` | `@container (min-width: 144px)` |
45 | | `cq-w-16` | `@container (min-width: 256px)` |
46 | | `cq-w-22` | `@container (min-width: 352px)` |
47 | | `cq-h-4` | `@container (min-height: 64px)` |
48 | | `cq-h-6` | `@container (min-height: 96px)` |
49 | | `cq-h-9` | `@container (min-height: 144px)` |
50 | | `cq-h-16` | `@container (min-height: 256px)` |
51 | | `cq-h-22` | `@container (min-height: 352px)` |
52 |
53 | Utilities:
54 |
55 | | Class | Property |
56 | | --- | --- |
57 | | `container-type-size` | `container-type: size` |
58 | | `container-type-inline-size` | `container-type: inline-size` |
59 | | `container-type-block-size` | `container-type: block-size` |
60 | | `container-type-style` | `container-type: style` |
61 | | `container-type-state` | `container-type: state` |
62 |
63 | There are no any `container-name` utilities by default. You should define your own utilities in `tailwind.config.js`.
64 |
65 | ## Example Usage
66 |
67 | ```html
68 |
69 | ```
70 |
71 | Output:
72 |
73 | ```css
74 | @container (min-width: 96px) {
75 | .cq-w-6\:bg-yellow-400 {
76 | --tw-bg-opacity: 1;
77 | background-color: rgb(96 165 250 / var(--tw-bg-opacity));
78 | }
79 | }
80 | ```
81 |
82 | #### You can use arbitrary variants too. (You should be using v3.1.0 or higher!)
83 |
84 | ```html
85 |
86 | ```
87 |
88 | Output:
89 |
90 | ```css
91 | @container (min-width: 238px) {
92 | .cq-w-\[238px\]\:bg-yellow-400 {
93 | --tw-bg-opacity: 1;
94 | background-color: rgb(96 165 250 / var(--tw-bg-opacity));
95 | }
96 | }
97 | ```
98 |
99 | ## Using Container Names
100 |
101 | ```html
102 |
103 | ```
104 |
105 | ```js
106 | // tailwind.config.js
107 | module.exports = {
108 | theme: {
109 | containerName: {
110 | sb: 'sidebar'
111 | },
112 | // ...
113 | }
114 | }
115 | ```
116 |
117 | Output:
118 |
119 | ```css
120 | @container sidebar (min-width: 96px) {
121 | .cq-w-sb-6\:bg-yellow-400 {
122 | --tw-bg-opacity: 1;
123 | background-color: rgb(96 165 250 / var(--tw-bg-opacity));
124 | }
125 | }
126 | ```
127 |
128 | ## Configuration
129 |
130 | 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:
131 |
132 | ```js
133 | // tailwind.config.js
134 | module.exports = {
135 | theme: {
136 | // P.S. Container Query thresholds can only be specified using pixels because of the polyfill I recommended.
137 | containerQuery: {
138 | xs: '120px',
139 | sm: '240px',
140 | md: '360px',
141 | },
142 | containerType: {
143 | size: 'size',
144 | }
145 | }
146 | }
147 | ```
148 |
149 | ## [Demo Page](https://dgknca.github.io/tailwindcss-container-query/)
--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
1 | For development purposes.
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Demo
9 |
10 |
11 |
12 |
13 |
14 |
Resize the container
15 |
16 |
17 |
18 |
11 |
12 |
13 |
Resize the container
14 |
15 |
16 |
17 |
4 |
5 |
6 |
Resize the container
7 |
8 |
9 |
10 |