Skip to content

Latest commit

 

History

History
161 lines (129 loc) · 6.52 KB

README.md

File metadata and controls

161 lines (129 loc) · 6.52 KB
Raw

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