Tailwind CSS px-to-viewport

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.