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