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

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