tailwind-clamp 4.0.2 → 4.0.4

package/README.md

@@ -9,7 +9,7 @@ The plugin is based on the formula presented in this [article](https://chriskirk
 - Clamp values between a min and max viewport width, making it grow / shrink with the viewport.
 - Possibility to use small to large, large to small, negative to positive, positive to negative and negative to negative values. (Negative values only work on properties that allow them, e.g. `margin`)
 - Supports `px`, `rem` and `em` units.
-- Support `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.
+- 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.
 - Supports using Tailwind CSS theme values, arbitrary values or a combination.
 
 ## Requirements
@@ -21,7 +21,7 @@ The current version of the plugin is designed to be used with Tailwind version 4
 Install the plugin from npm:
 
 ```sh
-npm install nicolas-cusan/tailwind-clamp
+npm i tailwind-clamp
 ```
 
 Add the plugin in your main CSS file:
@@ -37,16 +37,16 @@ The plugin allows two configuration options:
 
 | Name                   | Type       | Description                           | Default value |
 | ---------------------- | ---------- | ------------------------------------- | ------------- |
-| **`minViewportWidth`** | `{string}` | Viewport size where the clamp starts. | `375`         |
-| **`maxViewportWidth`** | `{string}` | Viewport size where the clamp end.    | `1440`        |
+| **`minViewportWidth`** | `{string}` | Viewport size where the clamp starts. | `23.4375rem`  |
+| **`maxViewportWidth`** | `{string}` | Viewport size where the clamp end.    | `90rem`       |
 
 Value should be a css length (`px`, `rem`, `em`). The unit for both options need to match.
 
 ```css
-@import 'tailwindcss';
+@import "tailwindcss";
 @plugin "tailwind-clamp" {
-  minViewportWidth: 23rem,
-  maxViewportWidth: 90rem
+  minViewportWidth: 25rem,
+  maxViewportWidth: 80rem
 };
 ```
 
@@ -63,8 +63,8 @@ clamp-[<property>,<start>,<end>,[minViewportWidth,maxViewportWidth]]
 - `property`: Property that the value should be applied to. See a list of all supported properties below.
 - `start`: Value at `minViewportWidth` viewport size. It can be a key from your Tailwind CSS config file or a a css length (`px`, `rem`, `em`), the unit will need to match `end`.
 - `end`: Value at `maxViewportWidth` viewport size. It can be a key from your Tailwind CSS config file or a css length (`px`, `rem`, `em`), the unit will need to match `start`.
-- `[minViewportWidth=375]`: Viewport size, where the clamp starts, defaults to `23.4375rem` (`375px`). It can be a breakpoint name from your theme or a css length (`px`, `rem`, `em`), the unit will need to match `maxViewportWidth` and be smaller than `maxViewportWidth`.
-- `[maxViewportWidth=1440]`: Viewport size, where the clamp stops, defaults to `90rem` (`1440`). It can be a breakpoint name from your theme or a css length (`px`, `rem`, `em`), the unit will need to match `minViewportWidth` and be be larger than `minViewportWidth`.
+- `[minViewportWidth=23.4375rem]`: Viewport size, where the clamp starts, defaults to `23.4375rem` (`375px`). It can be a breakpoint name from your theme or a css length (`px`, `rem`, `em`), the unit will need to match `maxViewportWidth` and be smaller than `maxViewportWidth`.
+- `[maxViewportWidth=90rem]`: Viewport size, where the clamp stops, defaults to `90rem` (`1440px`). It can be a breakpoint name from your theme or a css length (`px`, `rem`, `em`), the unit will need to match `minViewportWidth` and be be larger than `minViewportWidth`.
 
 ### Examples
 
@@ -88,13 +88,10 @@ clamp-[<property>,<start>,<end>,[minViewportWidth,maxViewportWidth]]
 - `w`
 - `h`
 - `size`
-- `min-w`
-- `min-h`
-- `max-w`
-- `max-h`
+- `min-w` and `min-h`
+- `max-w` and `max-h`
 - `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`.
-- `translate-x`
-- `translate-y`
+- `translate-x` and `translate-y`
 - `text-stroke`
 - `stroke`
 - `leading`