Package Exports

tailwindcss-viewport-spacing
tailwindcss-viewport-spacing/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-viewport-spacing) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

License

MIT License