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 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
- - `inset` including `inset-x`, `inset-y`.
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` and `min-h`
190
- - `max-w` and `max-h`
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
- - `scroll-m` including `scroll-mx`, `scroll-my`, `scroll-ms`, `scroll-me`, `scroll-mt`, `scroll-mb`, `scroll-ml`, `scroll-mr`
199
- - `scroll-p` including `scroll-px`, `scroll-py`, `scroll-ps`, `scroll-pe`, `scroll-pt`, `scroll-pb`, `scroll-pl`, `scroll-pr`
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)