Skip to content

Latest commit

 

History

History
78 lines (63 loc) · 2.69 KB

README.md

File metadata and controls

78 lines (63 loc) · 2.69 KB
Raw

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

  1. Import the plugin in your tailwind.config.js file:
const viewportSpacing = require('tailwindcss-viewport-spacing');
  1. 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%
  },
}),
  1. 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