tailwind-clamp 4.2.2 → 4.3.1
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 +82 -0
- package/dist/index.js +708 -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
|
@@ -10,6 +10,8 @@ Leverage the the CSS `clamp` function in your [Tailwind CSS](https://tailwindcss
|
|
|
10
10
|
- Supports `text` values with multiple properties (`fontSize`, `lineHeight`, `letterSpacing`). If `lineHeight` is definded as a unitless number or a `calc()` function, the resulting value is calculated and converted to the `fontSize` unit.
|
|
11
11
|
- Supports using Tailwind CSS theme values, arbitrary values or a combination.
|
|
12
12
|
- Supports container queries.
|
|
13
|
+
- Supports CSS custom properties (`--*`) as the target property, to store `clamp()` values in variables for reuse.
|
|
14
|
+
- Supports defining clamped theme variables via `@theme { --clamp-*: start, end; }`.
|
|
13
15
|
|
|
14
16
|
## Requirements
|
|
15
17
|
|
|
@@ -89,6 +91,85 @@ All spacing and sizing properties (`p`, `m`, `w`, etc.) accept unitless numbers
|
|
|
89
91
|
</div>
|
|
90
92
|
```
|
|
91
93
|
|
|
94
|
+
### Custom properties
|
|
95
|
+
|
|
96
|
+
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.
|
|
97
|
+
|
|
98
|
+
```
|
|
99
|
+
clamp-[--variable-name,start,end]
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
> [!NOTE]
|
|
103
|
+
> Only explicit CSS lengths (`px`, `rem`, `em`) are accepted as values — theme tokens and unitless numbers are not supported for custom properties.
|
|
104
|
+
|
|
105
|
+
#### Example
|
|
106
|
+
|
|
107
|
+
```html
|
|
108
|
+
<body class="clamp-[--blockspace,2rem,6rem]">
|
|
109
|
+
<header class="[--header-height:80px] fixed top-0">...</header>
|
|
110
|
+
<section class="mt-[calc(var(--header-height)+var(--blockspace))]">
|
|
111
|
+
Content with fluid spacing that accounts for the fixed header.
|
|
112
|
+
</section>
|
|
113
|
+
</body>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Theme variables
|
|
117
|
+
|
|
118
|
+
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.
|
|
119
|
+
|
|
120
|
+
```css
|
|
121
|
+
@theme {
|
|
122
|
+
--clamp-blockspace: 2rem, 6rem;
|
|
123
|
+
--clamp-display: 2rem, 4rem;
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
You can also pass custom viewport breakpoints as the third and fourth values:
|
|
128
|
+
|
|
129
|
+
```css
|
|
130
|
+
@theme {
|
|
131
|
+
--clamp-narrow-space: 1rem, 3rem, 20rem, 80rem;
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
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:
|
|
136
|
+
|
|
137
|
+
```css
|
|
138
|
+
@theme {
|
|
139
|
+
--clamp-blockspace: 2rem, 6rem;
|
|
140
|
+
--clamp-display: 2rem, 4rem;
|
|
141
|
+
--font-size-display: var(--clamp-display);
|
|
142
|
+
--spacing-section: var(--clamp-blockspace);
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
With the above theme, you can use the standard Tailwind utilities directly:
|
|
147
|
+
|
|
148
|
+
```html
|
|
149
|
+
<h1 class="text-display">Fluid heading</h1>
|
|
150
|
+
<section class="p-section">Fluid padding from the theme</section>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
You can also reference the clamp variables directly in utilities using the `()` shorthand syntax:
|
|
154
|
+
|
|
155
|
+
```html
|
|
156
|
+
<section class="mt-(--clamp-blockspace)">
|
|
157
|
+
Content with fluid spacing defined in the theme.
|
|
158
|
+
</section>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
Or in custom CSS:
|
|
162
|
+
|
|
163
|
+
```css
|
|
164
|
+
.hero {
|
|
165
|
+
padding: var(--clamp-blockspace);
|
|
166
|
+
font-size: var(--clamp-display);
|
|
167
|
+
}
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
> [!NOTE]
|
|
171
|
+
> Only explicit CSS lengths (`px`, `rem`, `em`) are accepted — unitless numbers and theme tokens are not supported in theme variable definitions.
|
|
172
|
+
|
|
92
173
|
## Supported properties
|
|
93
174
|
|
|
94
175
|
- `p` including `pt`, `pb`, `pl`, `pr`, `px`, `py`, `ps`, `pe`.
|
|
@@ -116,6 +197,7 @@ All spacing and sizing properties (`p`, `m`, `w`, etc.) accept unitless numbers
|
|
|
116
197
|
- `scroll-p` including `scroll-px`, `scroll-py`, `scroll-ps`, `scroll-pe`, `scroll-pt`, `scroll-pb`, `scroll-pl`, `scroll-pr`
|
|
117
198
|
- `decoration`
|
|
118
199
|
- `underline-offset`
|
|
200
|
+
- `--*` (CSS custom properties)
|
|
119
201
|
|
|
120
202
|
## Usage with tailwind-merge
|
|
121
203
|
|