Tailwindcss-viewport-spacing NPM

Tailwind CSS Viewport Spacing

Tailwind CSS Viewport Spacing is a plugin that allows you to adjust the following utility classes based on viewport width (vw) and viewport height (vh):

Padding (e.g., p, px, py, pt, pr, pb, pl)
Margin (e.g., m, mx, my, mt, mr, mb, ml)
Position (e.g., top, right, bottom, left)
Width (e.g., w)
Height (e.g., h)
Max-width (e.g., max-w)
Max-height (e.g., max-h)
Min-width (e.g., min-w)
Min-height (e.g., min-h)
Font-size (e.g., text)
Inset-inline-start (e.g., start)
Inset-inline-end (e.g., end)
Inset (e.g., inset)

Installation

Install the package using npm:

npm install tailwindcss-viewport-spacing

or using yarn:

yarn add tailwindcss-viewport-spacing

Usage

Import the plugin in your tailwind.config.js file:

const viewportSpacing = require('tailwindcss-viewport-spacing');

Add the plugin to your tailwind.config.js plugins section and configure the options:

viewportSpacing({
  vw: {
    phone: 375, // This configuration means that when the viewport width is 375px, the multiplier will be 100%
    desktop: 1280,
  },
  vh: {
    phone: 667, // This configuration means that when the viewport height is 667px, the multiplier will be 100%
  },
}),

Use the generated utility classes in your HTML:

<div class="p-vw-phone-[100]">Content with padding equal to 100px when the viewport width is 375px</div>
<div class="h-vh-phone-[100]">Content with height equal to 100px when the viewport height is 667px</div>

In this example, the p-vw-phone-100 class will apply a padding of 100px when the viewport width is 375px, and the h-vh-phone-100 class will apply a height of 100px when the viewport height is 667px.

Supported CSS Properties

Padding: Apply viewport-based padding to elements.
Margin: Apply viewport-based margin to elements.
Position: Adjust the position of elements based on viewport width.
Width: Control the width of elements based on viewport width.
Height: Control the height of elements based on viewport width.
Max-width: Set the maximum width of elements based on viewport width.
Max-height: Set the maximum height of elements based on viewport width.
Min-width: Set the minimum width of elements based on viewport width.
Min-height: Set the minimum height of elements based on viewport width.
Font-size: Adjust the font size of text elements based on viewport width.
Inset-inline-start: Control the start inset of positioned elements based on viewport width.
Inset-inline-end: Control the end inset of positioned elements based on viewport width.
Inset: Control the inset of positioned elements based on viewport width.