tailwind-clamp 4.0.6 → 4.0.7

package/README.md

@@ -1,8 +1,6 @@
-# Tailwind clamp 🗜️
+# [Tailwind clamp 🗜️](https://nicolas-cusan.github.io/tailwind-clamp/)
 
-Tailwind CSS plugin to use CSS `clamp` in your project. Enabling fluid interfaces using Tailwind syntax.
-
-The plugin is based on the formula presented in this [article](https://chriskirknielsen.com/blog/modern-fluid-typography-with-clamp/)
+Leverage the the CSS `clamp` function in your [Tailwind CSS](https://tailwindcss.com/) project.
 
 ## Features
 
@@ -28,7 +26,7 @@ npm i tailwind-clamp
 Add the plugin in your main CSS file:
 
 ```css
-@import 'tailwindcss';
+@import "tailwindcss";
 @plugin "tailwind-clamp";
 ```
 
@@ -36,10 +34,10 @@ Add the plugin in your main CSS file:
 
 The plugin allows two configuration options:
 
-| Name          | Type       | Description                                        | Default value |
-| ------------- | ---------- | -------------------------------------------------- | ------------- |
-| **`minSize`** | `{string}` | Viewport or container size where the clamp starts. | `23.4375rem`  |
-| **`maxSize`** | `{string}` | Viewport or container size where the clamp end.    | `90rem`       |
+| Name          | Type       | Description                           | Default value |
+| ------------- | ---------- | ------------------------------------- | ------------- |
+| **`minSize`** | `{string}` | Viewport size where the clamp starts. | `23.4375rem`  |
+| **`maxSize`** | `{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.
 
@@ -64,8 +62,8 @@ clamp-[<property>,<start>,<end>,[minSize,maxSize]]
 - **`property`** Property that the value should be applied to. See a list of all supported properties below.
 - **`start`** Value at `minSize` 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 `maxSize` 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`.
-- **`[minSize=23.4375rem]`** Viewport or container 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 `maxSize` and be smaller than `maxSize`.
-- **`[maxSize=90rem]`** Viewport or container 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 `minSize` and be be larger than `minSize`.
+- **`[minSize=23.4375rem]`** Viewport or container size, where the clamp starts, defaults to `23.4375rem` (`375px`). It can be a breakpoint or container size name from your theme or a css length (`px`, `rem`, `em`). Container size names _and values_ are prefixed with `@`. The unit will need to match `maxSize` and be smaller than `maxSize`.
+- **`[maxSize=90rem]`** Viewport or container size, where the clamp stops, defaults to `90rem` (`1440px`). It can be a breakpoint or container size name from your theme or a css length (`px`, `rem`, `em`). Container size names _and values_ are prefixed with `@`. The unit will need to match `minSize` and be be larger than `minSize`.
 
 ### Examples
 
@@ -106,3 +104,13 @@ clamp-[<property>,<start>,<end>,[minSize,maxSize]]
 - `border` including `border-t`, `border-b`, `border-l`, `border-r`, `border-x`, `border-y`.
 - `scroll-m` including `scroll-mx`, `scroll-my`, `scroll-ms`, `scroll-me`, `scroll-mt`, `scroll-mb`, `scroll-ml`, `scroll-mr`
 - `scroll-p` including `scroll-px`, `scroll-py`, `scroll-ps`, `scroll-pe`, `scroll-pt`, `scroll-pb`, `scroll-pl`, `scroll-pr`
+
+## Credits & mentions
+
+The plugin is based on the formula presented in this [article](https://chriskirknielsen.com/blog/modern-fluid-typography-with-clamp/).
+
+See also [fluid.tw](https://fluid.tw/) by [Max Barvian](https://barvian.me/).
+
+## License
+
+MIT