tailwind-clamp 4.2.1 → 4.3.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 +113 -0
- package/dist/index.js +703 -664
- 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
|
@@ -89,6 +89,83 @@ All spacing and sizing properties (`p`, `m`, `w`, etc.) accept unitless numbers
|
|
|
89
89
|
</div>
|
|
90
90
|
```
|
|
91
91
|
|
|
92
|
+
### Custom properties
|
|
93
|
+
|
|
94
|
+
You can use CSS custom properties (`--*`) as the target property to store a `clamp()` value in a CSS variable for reuse in `calc()` expressions or other properties.
|
|
95
|
+
|
|
96
|
+
```
|
|
97
|
+
clamp-[--variable-name,start,end]
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
Only explicit CSS lengths (`px`, `rem`, `em`) are accepted as values — theme tokens and unitless numbers are not supported for custom properties.
|
|
101
|
+
|
|
102
|
+
#### Example
|
|
103
|
+
|
|
104
|
+
```html
|
|
105
|
+
<body class="clamp-[--blockspace,2rem,6rem]">
|
|
106
|
+
<header class="[--header-height:80px] fixed top-0">...</header>
|
|
107
|
+
<section class="mt-[calc(var(--header-height)+var(--blockspace))]">
|
|
108
|
+
Content with fluid spacing that accounts for the fixed header.
|
|
109
|
+
</section>
|
|
110
|
+
</body>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Theme variables
|
|
114
|
+
|
|
115
|
+
You can define clamped values directly in your `@theme` block using the `--clamp-*` namespace. The plugin will compute the `clamp()` formula and inject the result as a CSS custom property.
|
|
116
|
+
|
|
117
|
+
```css
|
|
118
|
+
@theme {
|
|
119
|
+
--clamp-blockspace: 2rem, 6rem;
|
|
120
|
+
--clamp-display: 2rem, 4rem;
|
|
121
|
+
}
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
You can also pass custom viewport breakpoints as the third and fourth values:
|
|
125
|
+
|
|
126
|
+
```css
|
|
127
|
+
@theme {
|
|
128
|
+
--clamp-narrow-space: 1rem, 3rem, 20rem, 80rem;
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
Theme clamp variables can be referenced by other theme variables. This lets you use computed clamp values for built-in Tailwind theme tokens like font sizes, spacing, and more:
|
|
133
|
+
|
|
134
|
+
```css
|
|
135
|
+
@theme {
|
|
136
|
+
--clamp-blockspace: 2rem, 6rem;
|
|
137
|
+
--clamp-display: 2rem, 4rem;
|
|
138
|
+
--font-size-display: var(--clamp-display);
|
|
139
|
+
--spacing-section: var(--clamp-blockspace);
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
With the above theme, you can use the standard Tailwind utilities directly:
|
|
144
|
+
|
|
145
|
+
```html
|
|
146
|
+
<h1 class="text-display">Fluid heading</h1>
|
|
147
|
+
<section class="p-section">Fluid padding from the theme</section>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
You can also reference the clamp variables directly in utilities using the `()` shorthand syntax:
|
|
151
|
+
|
|
152
|
+
```html
|
|
153
|
+
<section class="mt-(--clamp-blockspace)">
|
|
154
|
+
Content with fluid spacing defined in the theme.
|
|
155
|
+
</section>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
Or in custom CSS:
|
|
159
|
+
|
|
160
|
+
```css
|
|
161
|
+
.hero {
|
|
162
|
+
padding: var(--clamp-blockspace);
|
|
163
|
+
font-size: var(--clamp-display);
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
Only explicit CSS lengths (`px`, `rem`, `em`) are accepted — unitless numbers and theme tokens are not supported in theme variable definitions.
|
|
168
|
+
|
|
92
169
|
## Supported properties
|
|
93
170
|
|
|
94
171
|
- `p` including `pt`, `pb`, `pl`, `pr`, `px`, `py`, `ps`, `pe`.
|
|
@@ -116,6 +193,42 @@ All spacing and sizing properties (`p`, `m`, `w`, etc.) accept unitless numbers
|
|
|
116
193
|
- `scroll-p` including `scroll-px`, `scroll-py`, `scroll-ps`, `scroll-pe`, `scroll-pt`, `scroll-pb`, `scroll-pl`, `scroll-pr`
|
|
117
194
|
- `decoration`
|
|
118
195
|
- `underline-offset`
|
|
196
|
+
- `--*` (CSS custom properties)
|
|
197
|
+
|
|
198
|
+
## Usage with tailwind-merge
|
|
199
|
+
|
|
200
|
+
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:
|
|
201
|
+
|
|
202
|
+
```sh
|
|
203
|
+
npm i tailwind-clamp-merge
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
```js
|
|
207
|
+
|
|
208
|
+
const twMerge = extendTailwindMerge(withTailwindClamp);
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
This teaches tailwind-merge that `clamp-[p,1,3]` belongs to the same class group as `p-4`, so conflicts are resolved correctly:
|
|
212
|
+
|
|
213
|
+
```js
|
|
214
|
+
twMerge('p-4 clamp-[p,1,3]')
|
|
215
|
+
// => 'clamp-[p,1,3]'
|
|
216
|
+
|
|
217
|
+
twMerge('clamp-[p,1,3] p-4')
|
|
218
|
+
// => 'p-4'
|
|
219
|
+
|
|
220
|
+
twMerge('text-lg clamp-[text,lg,3xl]')
|
|
221
|
+
// => 'clamp-[text,lg,3xl]'
|
|
222
|
+
|
|
223
|
+
// Hierarchical conflicts work too
|
|
224
|
+
twMerge('px-4 py-2 clamp-[p,1,3]')
|
|
225
|
+
// => 'clamp-[p,1,3]'
|
|
226
|
+
|
|
227
|
+
twMerge('w-4 h-8 clamp-[size,10,20]')
|
|
228
|
+
// => 'clamp-[size,10,20]'
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
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.
|
|
119
232
|
|
|
120
233
|
## Credits & mentions
|
|
121
234
|
|