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

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

ixkaito / tailwindcss-fluid-spacing Goto Github PK