1.0.1 • Published 2 years ago

tailwindcss-clamp v1.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years 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

2 years ago

1.0.0

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago