tailwindcss-fluid-spacing

A Tailwind CSS plugin that provides fluid-responsive spacings across viewport widths.

Installation

Install the plugin from npm:

npm install -D tailwindcss-fluid-spacing

or

yarn add -D tailwindcss-fluid-spacing

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-fluid-spacing'),
    // ...
  ],
}

Usage

Basic

Fluid-spacing is inherited by the padding, margin, width, height, maxHeight, gap, inset, space and translate core plugins. Insert vw- before {size} to each utilities.

Examples:

<div class="p-vw-8">...</div> <!-- padding: 2.5vw; -->
<div class="mx-vw-16">...</div> <!-- margin-left: 5vw; margin-right: 5vw; -->
<div class="-mt-vw-16">...</div> <!-- margin-top: -5vw; -->
<div class="w-vw-64">...</div> <!-- width: 20vw; -->
<div class="h-vw-32">...</div> <!-- height: 10vw; -->
<div class="gap-vw-10">...</div> <!-- gap: 3.125vw; -->
<div class="top-vw-24">...</div> <!-- top: 7.5vw; -->
<div class="inset-vw-4">...</div> <!-- top: 1.25vw; right: 1.25vw; bottom: 1.25vw; left: 1.25vw; -->
<div class="translate-y-vw-12">...</div> <!-- --tw-translate-y: 3.75vw; transform: var(--tw-transform); -->

Responsive

To control the fluid-spacing at a specific breakpoint, add a {screen}: prefix to any existing utility. For example, adding the class md:p-vw-8 to an element would apply the p-vw-8 utility at medium screen sizes and above.

<div class="md:p-vw-8">...</div>

To provide a minimum or a maximum value, add a -{min|max}@{screen} suffix to any existing utility; to privide both minmun and maximum values, add a -min@{screen}-max@{screen} suffix. For example, the class mt-vw-16-min@sm would provide the 5vw value with the minmum value 2rem (32px) which equals 5vw at the small screen.

<div class="mt-vw-16-min@sm">...</div> <!-- margin-top: max(5vw, 2rem); -->
<div class="mt-vw-16-max@xl">...</div> <!-- margin-top: min(5vw, 4rem); -->
<div class="mt-vw-16-min@sm-max@xl">...</div> <!-- margin-top: clamp( 2rem, 5vw, 4rem ); -->

The -{min|max}@{screen} and -min@{screnn}-max@{screen} suffixes are also available for any breakpoint.

<div class="my-10 sm:my-vw-20-max@xl">...</div>

Default fluid-spacing

Size	Value	320px	sm: 640px	md: 768px	lg: 1024px	xl: 1280px	2xl: 1536px
1	0.3125vw	1px	2px	2.4px	3.2px	4px	4.8px
1.5	0.46875vw	1.5px	3px	3.6px	4.8px	6px	7.2px
2	0.625vw	2px	4px	4.8px	6.4px	8px	9.6px
2.5	0.78125vw	2.5px	5px	6px	8px	10px	12px
3	0.9375vw	3px	6px	7.2px	9.6px	12px	14.4px
3.5	1.09375vw	3.5px	7px	8.4px	11.2px	14px	16.8px
4	1.25vw	4px	8px	9.6px	12.8px	16px	19.2px
5	1.5625vw	5px	10px	12px	16px	20px	24px
6	1.875vw	6px	12px	14.4px	19.2px	24px	28.8px
7	2.1875vw	7px	14px	16.8px	22.4px	28px	33.6px
8	2.5vw	8px	16px	19.2px	25.6px	32px	38.4px
9	2.8125vw	9px	18px	21.6px	28.8px	36px	43.2px
10	3.125vw	10px	20px	24px	32px	40px	48px
11	3.4375vw	11px	22px	26.4px	35.2px	44px	52.8px
12	3.75vw	12px	24px	28.8px	38.4px	48px	57.6px
14	4.375vw	14px	28px	33.6px	44.8px	56px	67.2px
16	5vw	16px	32px	38.4px	51.2px	64px	76.8px
20	6.25vw	20px	40px	48px	64px	80px	96px
24	7.5vw	24px	48px	57.6px	76.8px	96px	115.2px
28	8.75vw	28px	56px	67.2px	89.6px	112px	134.4px
32	10vw	32px	64px	76.8px	102.4px	128px	153.6px
36	11.25vw	36px	72px	86.4px	115.2px	144px	172.8px
40	12.5vw	40px	80px	96px	128px	160px	192px
44	13.75vw	44px	88px	105.6px	140.8px	176px	211.2px
48	15vw	48px	96px	115.2px	153.6px	192px	230.4px
52	16.25vw	52px	104px	124.8px	166.4px	208px	249.6px
56	17.5vw	56px	112px	134.4px	179.2px	224px	268.8px
60	18.75vw	60px	120px	144px	192px	240px	288px
64	20vw	64px	128px	153.6px	204.8px	256px	307.2px
72	22.5vw	72px	144px	172.8px	230.4px	288px	345.6px
80	25vw	80px	160px	192px	256px	320px	384px
96	30vw	96px	192px	230.4px	307.2px	384px	460.8px

Configuration options

You can invoke the plugin passing along options when registering it in plugins configuration.

Customize the default setting

Use the sizes key to customize the default setting.

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-fluid-spacing')({
      sizes: [16, 20, 24],
    }),
    // ...
  ],
}

This will only use 16, 20 and 24 as the {size} to generate classes like p-vw-16, m-vw-20, w-vw-24, etc.

Extend the default setting

To extend the default setting, put the sizes key in extend section.

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-fluid-spacing')({
      extend: {
        sizes: [68, 76],
      },
    }),
    // ...
  ],
}

This will generate classes like p-vw-68 and m-vw-76 in addition to all of the default fluid-spacing utilities.

License

MIT