You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+39-14Lines changed: 39 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -1,13 +1,18 @@
1
1
# @tailwindcss/container-queries
2
2
3
-
A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.
3
+
A plugin for Tailwind CSS v3.2+ that provides utilities for container queries both for X and Y values.
4
+
5
+
Forked from [tailwindcss/container-queries](https://github.com/tailwindlabs/tailwindcss-container-queries).
6
+
7
+
Heavily inspired by [this PR](https://github.com/tailwindlabs/tailwindcss-container-queries/pull/7) from [@kieranm](https://github.com/kieranm).
8
+
4
9
5
10
## Installation
6
11
7
12
Install the plugin from npm:
8
13
9
14
```sh
10
-
npm install @tailwindcss/container-queries
15
+
npm install container-queries-2d
11
16
```
12
17
13
18
Then add the plugin to your `tailwind.config.js` file:
@@ -19,47 +24,67 @@ module.exports = {
19
24
// ...
20
25
},
21
26
plugins: [
22
-
require('@tailwindcss/container-queries'),
27
+
require('container-queries-2d'),
23
28
// ...
24
29
],
25
30
}
26
31
```
27
32
28
33
## Usage
29
34
30
-
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:`:
35
+
Start by marking an element as a container using the `@container` class. You can now apply styles based on the container’s width or height using the new `@w-*` and `@h-*` modifiers, in addition to the width-based container breakpoints like `@md:`, `@lg:`, and `@xl:`.
36
+
37
+
### Applying Width and Height Breakpoints
38
+
39
+
With this version, you can target styles based on either the width or height of the container. Use `@w-*` for width-based breakpoints and `@h-*` for height-based breakpoints. This allows for more granular control over responsive design.
40
+
41
+
#### Width-Based Breakpoints
42
+
For width-based styles, use the `@w-` prefix:
43
+
44
+
```html
45
+
<divclass="@container">
46
+
<divclass="@w-lg:text-black">
47
+
<!-- This text turns black when the container width is larger than `32rem` -->
48
+
</div>
49
+
</div>
50
+
```
51
+
52
+
#### Height-Based Breakpoints
53
+
For height-based styles, use the `@h-` prefix:
31
54
32
55
```html
33
56
<divclass="@container">
34
-
<divclass="@lg:underline">
35
-
<!-- This text will be underlined when the container is larger than `32rem` -->
57
+
<divclass="@h-lg:text-black">
58
+
<!-- This text turns black when the container height is larger than `32rem` -->
36
59
</div>
37
60
</div>
38
61
```
39
62
40
-
By default we provide [container sizes](#configuration) from `@xs` (`20rem`) to `@7xl` (`80rem`).
63
+
By default we provide [container sizes](#configuration) from `@5xs` (`4rem`) to `@7xl` (`80rem`).
41
64
42
65
### Named containers
43
66
44
-
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`:
67
+
You can optionally name containers using the`@container/{name}` class and use that name in container variants. With the new width- and height-based prefixes, you can specify named containers as well, such as `@w-lg/{name}` and `@h-lg/{name}`:
45
68
46
69
```html
47
70
<divclass="@container/main">
48
71
<!-- ... -->
49
-
<divclass="@lg/main:underline">
50
-
<!-- This text will be underlined when the "main" container is larger than `32rem` -->
<!-- This text turns red when the "main" container is wider than `32rem` -->
74
+
<!-- The background turns green when the "main" container is taller than `32rem` -->
51
75
</div>
52
76
</div>
53
77
```
54
78
55
79
### Arbitrary container sizes
56
80
57
-
In addition to using one of the [container sizes](#configuration) provided by default, you can also create one-off sizes using any arbitrary value:
81
+
In addition to using one of the [container sizes](#configuration) provided by default, you can also create one-off sizes using any arbitrary value for the container width or height:
58
82
59
83
```html
60
84
<divclass="@container">
61
-
<divclass="@[17.5rem]:underline">
62
-
<!-- This text will be underlined when the container is larger than `17.5rem` -->
0 commit comments