tailwind-clamp 4.4.0 → 4.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -11
- package/dist/index.js +926 -828
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +1 -1
- package/dist/index.umd.cjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -21,7 +21,7 @@ The current version of the plugin is designed to be used with Tailwind version 4
|
|
|
21
21
|
|
|
22
22
|
## Installation
|
|
23
23
|
|
|
24
|
-
Install the plugin from npm:
|
|
24
|
+
Install the plugin from [npm](https://www.npmjs.com/package/tailwind-clamp):
|
|
25
25
|
|
|
26
26
|
```sh
|
|
27
27
|
npm i tailwind-clamp
|
|
@@ -83,6 +83,18 @@ clamp-[<property>,<start>,<end>,[minSize,maxSize]]
|
|
|
83
83
|
</div>
|
|
84
84
|
```
|
|
85
85
|
|
|
86
|
+
### Using a custom `maxSize` with the default `minSize`
|
|
87
|
+
|
|
88
|
+
If you only want to override `maxSize` while keeping the default `minSize`, you can leave the fourth argument empty:
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<div class="clamp-[p,2,4,,md]">
|
|
92
|
+
Padding scales from the default minSize (375px) up to the `md` breakpoint.
|
|
93
|
+
</div>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
This is equivalent to writing `clamp-[p,2,4,23.4375rem,md]` but saves you from having to remember the default value.
|
|
97
|
+
|
|
86
98
|
### Note on spacing and sizing properties
|
|
87
99
|
|
|
88
100
|
All spacing and sizing properties (`p`, `m`, `w`, etc.) accept unitless numbers and .5 floating numbers that will get multiplied by the `--spacing` variable, analog to how Tailwind CSS handles spacing values.
|
|
@@ -174,29 +186,33 @@ Or in custom CSS:
|
|
|
174
186
|
|
|
175
187
|
## Supported properties
|
|
176
188
|
|
|
177
|
-
- `p` including `pt`, `pb`, `pl`, `pr`, `px`, `py`, `ps`, `pe`.
|
|
178
|
-
- `m` including `mt`, `mb`, `ml`, `mr`, `mx`, `my`, `ms`, `me`.
|
|
179
|
-
- `
|
|
189
|
+
- `p` including `pt`, `pb`, `pl`, `pr`, `px`, `py`, `ps`, `pe`, `pbs`, `pbe`.
|
|
190
|
+
- `m` including `mt`, `mb`, `ml`, `mr`, `mx`, `my`, `ms`, `me`, `mbs`, `mbe`.
|
|
191
|
+
- `space-x` and `space-y`
|
|
192
|
+
- `inset` including `inset-x`, `inset-y`, `inset-bs`, `inset-be`.
|
|
180
193
|
- `top`
|
|
181
194
|
- `left` and `start`.
|
|
182
195
|
- `right` and `end`.
|
|
183
196
|
- `bottom`
|
|
184
197
|
- `text` including `font-size`, `line-height` and `letter-spacing` if defined.
|
|
185
198
|
- `gap` including `gap-x`, `gap-y`.
|
|
186
|
-
- `w`
|
|
187
|
-
- `h`
|
|
199
|
+
- `w` and `inline`
|
|
200
|
+
- `h` and `block`
|
|
188
201
|
- `size`
|
|
189
|
-
- `min-w`
|
|
190
|
-
- `max-w`
|
|
202
|
+
- `min-w`, `min-h`, `min-inline`, `min-block`
|
|
203
|
+
- `max-w`, `max-h`, `max-inline`, `max-block`
|
|
204
|
+
- `basis`
|
|
205
|
+
- `indent`
|
|
191
206
|
- `rounded` including `rounded-s`, `rounded-ss`, `rounded-se`, `rounded-e`, `rounded-ee`, `rounded-es`, `rounded-t`, `rounded-r`, `rounded-b`, `rounded-l`, `rounded-tl`, `rounded-tr`, `rounded-bl`, `rounded-br`.
|
|
192
207
|
- `translate-x` and `translate-y`
|
|
193
208
|
- `text-stroke`
|
|
194
209
|
- `stroke`
|
|
195
210
|
- `leading`
|
|
196
211
|
- `tracking`
|
|
197
|
-
- `border` including `border-t`, `border-b`, `border-l`, `border-r`, `border-x`, `border-y`.
|
|
198
|
-
- `
|
|
199
|
-
- `scroll-
|
|
212
|
+
- `border` including `border-t`, `border-b`, `border-l`, `border-r`, `border-x`, `border-y`, `border-s`, `border-e`, `border-bs`, `border-be`.
|
|
213
|
+
- `outline` and `outline-offset`
|
|
214
|
+
- `scroll-m` including `scroll-mx`, `scroll-my`, `scroll-ms`, `scroll-me`, `scroll-mt`, `scroll-mb`, `scroll-ml`, `scroll-mr`, `scroll-mbs`, `scroll-mbe`
|
|
215
|
+
- `scroll-p` including `scroll-px`, `scroll-py`, `scroll-ps`, `scroll-pe`, `scroll-pt`, `scroll-pb`, `scroll-pl`, `scroll-pr`, `scroll-pbs`, `scroll-pbe`
|
|
200
216
|
- `decoration`
|
|
201
217
|
- `underline-offset`
|
|
202
218
|
- `--*` (CSS custom properties)
|