tailwind-clamp 4.0.5 → 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
 
@@ -11,6 +9,7 @@ The plugin is based on the formula presented in this [article](https://chriskirk
 - Supports `px`, `rem` and `em` units.
 - 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.
+- Supports container queries.
 
 ## Requirements
 
@@ -27,7 +26,7 @@ npm i tailwind-clamp
 Add the plugin in your main CSS file:
 
 ```css
-@import 'tailwindcss';
+@import "tailwindcss";
 @plugin "tailwind-clamp";
 ```
 
@@ -35,36 +34,36 @@ Add the plugin in your main CSS file:
 
 The plugin allows two configuration options:
 
-| Name                   | Type       | Description                           | Default value |
-| ---------------------- | ---------- | ------------------------------------- | ------------- |
-| **`minViewportWidth`** | `{string}` | Viewport size where the clamp starts. | `23.4375rem`  |
-| **`maxViewportWidth`** | `{string}` | Viewport 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.
 
 ```css
 @import "tailwindcss";
 @plugin "tailwind-clamp" {
-  minViewportWidth: 25rem,
-  maxViewportWidth: 80rem
+  minSize: 25rem,
+  maxSize: 80rem
 };
 ```
 
 ## Usage
 
-The plugin relies on the arbitrary values syntax `clamp-[...]`. You need to pass at least three arguments separated by commas without whitespace, optionally you can also pass the `minViewportWidth` and the `maxViewportWidth`:
+The plugin relies on the arbitrary values syntax `clamp-[...]`. You need to pass at least three arguments separated by commas without whitespace, optionally you can also pass the `minSize` and the `maxSize`:
 
 ```
-clamp-[<property>,<start>,<end>,[minViewportWidth,maxViewportWidth]]
+clamp-[<property>,<start>,<end>,[minSize,maxSize]]
 ```
 
 ### Arguments
 
-- `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=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`.
+- **`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 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
 
@@ -72,6 +71,12 @@ clamp-[<property>,<start>,<end>,[minViewportWidth,maxViewportWidth]]
 <div class="clamp-[px,20,40] clamp-[py,10,18]">
   Add some fluid padding here.
 </div>
+
+<div class="@container">
+  <div class="clamp-[text,lg,3xl,@sm,@5xl] clamp-[py,2,4,@29.5rem,@82rem]">
+    Add some fluid typography and padding to the content of the container.
+  </div>
+</div>
 ```
 
 ## Supported properties
@@ -97,8 +102,15 @@ clamp-[<property>,<start>,<end>,[minViewportWidth,maxViewportWidth]]
 - `leading`
 - `tracking`
 - `border` including `border-t`, `border-b`, `border-l`, `border-r`, `border-x`, `border-y`.
-- `scroll-m`
+- `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/).
 
-## Roadmap
+## License
 
-- Add showcase
+MIT