postcss-clampwind 0.0.1 → 0.0.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 +8 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# clampwind
|
|
1
|
+
# postcss-clampwind
|
|
2
2
|
|
|
3
3
|
A PostCSS plugin that transforms any two‑argument `clamp()` call into a fully fluid value, seamlessly integrating with Tailwind CSS utilities. Made for Tailwind v4.
|
|
4
4
|
|
|
@@ -26,7 +26,7 @@ The supplied values are used to generate the expression inside the `clamp()` fun
|
|
|
26
26
|
Install the plugin from npm:
|
|
27
27
|
|
|
28
28
|
```sh
|
|
29
|
-
npm install -D clampwind
|
|
29
|
+
npm install -D postcss-clampwind
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
### PostCSS setup
|
|
@@ -36,7 +36,7 @@ Add the plugin to your `postcss.config.js` file:
|
|
|
36
36
|
```js
|
|
37
37
|
// postcss.config.mjs
|
|
38
38
|
import tailwindcss from "@tailwindcss/postcss"
|
|
39
|
-
import clampwind from "clampwind"
|
|
39
|
+
import clampwind from "postcss-clampwind"
|
|
40
40
|
|
|
41
41
|
export default {
|
|
42
42
|
plugins: [
|
|
@@ -55,7 +55,7 @@ If you are using CommonJS-based build tools like Webpack, you will need to use t
|
|
|
55
55
|
module.exports = {
|
|
56
56
|
plugins: {
|
|
57
57
|
require("@tailwindcss/postcss"),
|
|
58
|
-
require(
|
|
58
|
+
require("postcss-clampwind").default
|
|
59
59
|
}
|
|
60
60
|
};
|
|
61
61
|
```
|
|
@@ -66,7 +66,7 @@ If you are using Vite, you are probably using Tailwind with `@tailwindcss/vite`.
|
|
|
66
66
|
|
|
67
67
|
```js
|
|
68
68
|
// postcss.config.js
|
|
69
|
-
import clampwind from
|
|
69
|
+
import clampwind from "postcss-clampwind";
|
|
70
70
|
|
|
71
71
|
export default {
|
|
72
72
|
plugins: [
|
|
@@ -187,7 +187,7 @@ This will generate the following css:
|
|
|
187
187
|
|
|
188
188
|
### Clamp from one breakpoint
|
|
189
189
|
|
|
190
|
-
If you want to define a clamp value from a single breakpoint, clampwind will automatically generate the calculation from the defined breakpoint to the smallest or largest breakpoint depending on the direction, for example:
|
|
190
|
+
If you want to define a clamp value from a single breakpoint, postcss-clampwind will automatically generate the calculation from the defined breakpoint to the smallest or largest breakpoint depending on the direction, for example:
|
|
191
191
|
|
|
192
192
|
```html
|
|
193
193
|
<div class="md:text-[clamp(16px,50px)]"></div>
|
|
@@ -273,7 +273,7 @@ But this won't work when using two custom properties directly in the CSS with `@
|
|
|
273
273
|
|
|
274
274
|
### Clamp container queries
|
|
275
275
|
|
|
276
|
-
|
|
276
|
+
Postcss-clampwind supports container queries, just by using the normal Tailwind container query syntax, for example:
|
|
277
277
|
|
|
278
278
|
```html
|
|
279
279
|
<div class="@md:text-[clamp(16px,50px)]"></div>
|
|
@@ -291,7 +291,7 @@ This will generate the following css:
|
|
|
291
291
|
|
|
292
292
|
## Configuration
|
|
293
293
|
|
|
294
|
-
Tailwind v4 introduced the new CSS-based configuration and clampwind embraces it.
|
|
294
|
+
Tailwind v4 introduced the new CSS-based configuration and postcss-clampwind embraces it.
|
|
295
295
|
|
|
296
296
|
### Add custom breakpoints
|
|
297
297
|
|