tailwind-clamp 4.2.1 → 4.2.2
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 +35 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -117,6 +117,41 @@ All spacing and sizing properties (`p`, `m`, `w`, etc.) accept unitless numbers
|
|
|
117
117
|
- `decoration`
|
|
118
118
|
- `underline-offset`
|
|
119
119
|
|
|
120
|
+
## Usage with tailwind-merge
|
|
121
|
+
|
|
122
|
+
If you use [tailwind-merge](https://github.com/dcastil/tailwind-merge) to resolve conflicting Tailwind classes, install the `tailwind-clamp-merge` plugin so that clamp utilities are correctly merged with their static counterparts:
|
|
123
|
+
|
|
124
|
+
```sh
|
|
125
|
+
npm i tailwind-clamp-merge
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
```js
|
|
129
|
+
|
|
130
|
+
const twMerge = extendTailwindMerge(withTailwindClamp);
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
This teaches tailwind-merge that `clamp-[p,1,3]` belongs to the same class group as `p-4`, so conflicts are resolved correctly:
|
|
134
|
+
|
|
135
|
+
```js
|
|
136
|
+
twMerge('p-4 clamp-[p,1,3]')
|
|
137
|
+
// => 'clamp-[p,1,3]'
|
|
138
|
+
|
|
139
|
+
twMerge('clamp-[p,1,3] p-4')
|
|
140
|
+
// => 'p-4'
|
|
141
|
+
|
|
142
|
+
twMerge('text-lg clamp-[text,lg,3xl]')
|
|
143
|
+
// => 'clamp-[text,lg,3xl]'
|
|
144
|
+
|
|
145
|
+
// Hierarchical conflicts work too
|
|
146
|
+
twMerge('px-4 py-2 clamp-[p,1,3]')
|
|
147
|
+
// => 'clamp-[p,1,3]'
|
|
148
|
+
|
|
149
|
+
twMerge('w-4 h-8 clamp-[size,10,20]')
|
|
150
|
+
// => 'clamp-[size,10,20]'
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
All supported properties and their conflict hierarchies (e.g. `p` vs `px`/`py`, `size` vs `w`/`h`, `rounded` vs `rounded-tl`, `border` vs `border-t`) are handled automatically.
|
|
154
|
+
|
|
120
155
|
## Credits & mentions
|
|
121
156
|
|
|
122
157
|
The plugin is based on the formula presented in this [article](https://chriskirknielsen.com/blog/modern-fluid-typography-with-clamp/).
|