/tailwindcss-px-to-viewport

Tailwind CSS plugin that automatically converts px unit properties to viewport units vw or vh.

Primary LanguageCSSMIT LicenseMIT

Tailwind CSS px-to-viewport

npm version License: MIT

English | δΈ­ζ–‡

Tailwind CSS plugin that automatically converts px unit properties to viewport units vw or vh.

Features

  • πŸ“ Automatic viewport unit conversion based on design draft dimensions
  • πŸ–ŒοΈ Custom CSS property mapping rules
  • πŸ’‘ Dual support for width (vw) and height (vh) baselines

Installation

Install via npm:

npm install tailwindcss-px-to-viewport --save-dev

Configuration Guide

Basic configuration example: Add the plugin to the Tailwind CSS configuration file (tailwind.config.js):

// tailwind.config.js
import pxToViewport from 'tailwindcss-px-to-viewport'

export default {
  theme: {
    extend: {
      pxToViewPort: {
        // Base viewport configuration
        PresetScreen: {
          width: 1920, // Default design width (in px)
          height: 1080, // Default design height (in px)
        },
        // Custom extension rules (optional)
        utilities: {
          // Add custom conversion rules here
		'mt': 'margin-top',
  		'mx': ['margin-left', 'margin-right'], // More than one property is represented as an array
  		'my': ['margin-top', 'margin-bottom'],
        }
      },
    },
  },
  plugins: [
    pxToViewport() // Enable the plugin
  ],
}

If you are using Tailwind CSS V4, you can configure the plugin directly in the global stylesheet:

@import "tailwindcss";
@plugin 'tailwindcss-px-to-viewport';

Configuration Parameters

Parameter Type Default Value Description
viewportWidth number 1920 Base design width (in px)
viewportHeight number 1080 Base design height (in px)

Usage Syntax

Using pw+utility converts px units to vw, while using ph+utility converts px units to vh.

Property Mapping

Tailwind CSS Property Generated CSS Property Conversion Rule Result
pw-w-[value] width px β†’ (value/viewportWidth)*100 width: [*] vw
pw-h-[value] height px β†’ (value/viewportHeight)*100 height: [*] vh
pw-min-w-[value] min-width px β†’ (value/viewportWidth)*100 min-width: [*] vw
pw-max-w-[value] max-width px β†’ (value/viewportWidth)*100 max-width: [*] vw
pw-min-h-[value] min-height px β†’ (value/viewportHeight)*100 min-height: [*] vh
pw-max-h-[value] max-height px β†’ (value/viewportHeight)*100 max-height: [*] vh
pw-text-[value] font-size px β†’ (value/viewportWidth)*100 font-size: [*] vw
pw-leading-[value] line-height px β†’ (value/viewportHeight)*100 line-height: [*] vh
pw-indent-[value] text-indent px β†’ (value/viewportWidth)*100 text-indent: [*] vw
pw-top-[value] top px β†’ (value/viewportHeight)*100 top: [*] vh
pw-right-[value] right px β†’ (value/viewportWidth)*100 right: [*] vw
pw-bottom-[value] bottom px β†’ (value/viewportHeight)*100 bottom: [*] vh
pw-left-[value] left px β†’ (value/viewportWidth)*100 left: [*] vw
pw-m-[value] margin px β†’ (value/viewportWidth)*100 margin: [*] vw/vh
pw-mt-[value] margin-top px β†’ (value/viewportHeight)*100 margin-top: [*] vh
pw-mr-[value] margin-right px β†’ (value/viewportWidth)*100 margin-right: [*] vw
pw-mb-[value] margin-bottom px β†’ (value/viewportHeight)*100 margin-bottom: [*] vh
pw-ml-[value] margin-left px β†’ (value/viewportWidth)*100 margin-left: [*] vw
pw-mx-[value] margin-left/right px β†’ (value/viewportWidth)*100 margin-left/right: [*] vw
pw-my-[value] margin-top/bottom px β†’ (value/viewportHeight)*100 margin-top/bottom: [*] vh
pw-p-[value] padding px β†’ (value/viewportWidth)*100 padding: [*] vw/vh
pw-pt-[value] padding-top px β†’ (value/viewportHeight)*100 padding-top: [*] vh
pw-pr-[value] padding-right px β†’ (value/viewportWidth)*100 padding-right: [*] vw
pw-pb-[value] padding-bottom px β†’ (value/viewportHeight)*100 padding-bottom: [*] vh
pw-pl-[value] padding-left px β†’ (value/viewportWidth)*100 padding-left: [*] vw
pw-px-[value] padding-left/right px β†’ (value/viewportWidth)*100 padding-left/right: [*] vw
pw-py-[value] padding-top/bottom px β†’ (value/viewportHeight)*100 padding-top/bottom: [*] vh

License

This project is licensed under the MIT License.MIT License.