1.0.1 • Published 1 year ago

tailwindcss-clamp v1.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

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-10 will generate a fluid height that scales from 1 to 10.
  • m-1-to-10 will generate a fluid margin that scales from 1 to 10.
  • gap-1-to-10 will 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:

NameTypedefaultDescription
scalingStartnumber400(in px) at which vw to start the scaling process
scalingFinishnumber1280(in px) at which vw to reach the final size
1.0.1

1 year ago

1.0.0

1 year ago

0.0.10

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago