Skip to content

Commit c0d7f1e

Browse files
update README.md
1 parent d0f1cae commit c0d7f1e

File tree

1 file changed

+39
-14
lines changed

1 file changed

+39
-14
lines changed

README.md

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
# @tailwindcss/container-queries
22

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+
49

510
## Installation
611

712
Install the plugin from npm:
813

914
```sh
10-
npm install @tailwindcss/container-queries
15+
npm install container-queries-2d
1116
```
1217

1318
Then add the plugin to your `tailwind.config.js` file:
@@ -19,47 +24,67 @@ module.exports = {
1924
// ...
2025
},
2126
plugins: [
22-
require('@tailwindcss/container-queries'),
27+
require('container-queries-2d'),
2328
// ...
2429
],
2530
}
2631
```
2732

2833
## Usage
2934

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+
<div class="@container">
46+
<div class="@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:
3154

3255
```html
3356
<div class="@container">
34-
<div class="@lg:underline">
35-
<!-- This text will be underlined when the container is larger than `32rem` -->
57+
<div class="@h-lg:text-black">
58+
<!-- This text turns black when the container height is larger than `32rem` -->
3659
</div>
3760
</div>
3861
```
3962

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`).
4164

4265
### Named containers
4366

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}`:
4568

4669
```html
4770
<div class="@container/main">
4871
<!-- ... -->
49-
<div class="@lg/main:underline">
50-
<!-- This text will be underlined when the "main" container is larger than `32rem` -->
72+
<div class="@w-lg/main:text-red-500 @h-lg/main:bg-green-500">
73+
<!-- 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` -->
5175
</div>
5276
</div>
5377
```
5478

5579
### Arbitrary container sizes
5680

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:
5882

5983
```html
6084
<div class="@container">
61-
<div class="@[17.5rem]:underline">
62-
<!-- This text will be underlined when the container is larger than `17.5rem` -->
85+
<div class="@w-[20rem]:underline @h-[30rem]:bg-yellow-200">
86+
<!-- This text is underlined when the container width exceeds `20rem` -->
87+
<!-- The background is yellow when the container height exceeds `30rem` -->
6388
</div>
6489
</div>
6590
```
@@ -79,7 +104,7 @@ If you have configured Tailwind to use a prefix, make sure to prefix both the `@
79104
```html
80105
<div class="tw-@container">
81106
<!-- ... -->
82-
<div class="@lg:tw-underline">
107+
<div class="@w-lg:tw-underline">
83108
<!-- ... -->
84109
</div>
85110
</div>

0 commit comments

Comments
 (0)