1.0.1 • Published 2 years ago
tailwindcss-clamp v1.0.1
tailwindcss-clamp
simple function to generate clamp() spacing units from the default tailwindcss spacing units.
usage:
use any of the default tailwindcss classes that use the spacing scale and append a "-to-SIZE" to it, where SIZE is the desired full size to reach at the scalingFinish viewport width.
for example:
h-1-to-10will generate a fluid height that scales from 1 to 10.m-1-to-10will generate a fluid margin that scales from 1 to 10.gap-1-to-10will generate a fluid gap that scales from 1 to 10.
etc...
installation:
just run the generator under the spacing key of the extend section in your tailwind config:
theme: {
    extend: {
        spacing: require('tailwindcss-clamp')({ scalingStart: 400, scalingFinish: 1240 }),
        // ... rest of your extend config
        },
    },options:
| Name | Type | default | Description | 
|---|---|---|---|
| scalingStart | number | 400 | (in px) at which vw to start the scaling process | 
| scalingFinish | number | 1280 | (in px) at which vw to reach the final size |