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 utility classes based on viewport width.

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:

module.exports = {
  // ...
  plugins: [
    // ...
    viewportSpacing({
      phone: 375, // This configuration means that when the viewport width is 375px, the multiplier will be 100% 
      desktop: 1280,
    }),
  ],
};

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>

In this example, the p-vw-phone-[150] class will apply a padding of 150px when the viewport width is 375px.

License

MIT License