https://github.com/the-lemonboy/tailwindcss-px-to-viewport
Tailwind CSS plugin that automatically converts px unit properties to viewport units vw or vh.
https://github.com/the-lemonboy/tailwindcss-px-to-viewport
Last synced: 5 months ago
JSON representation
Tailwind CSS plugin that automatically converts px unit properties to viewport units vw or vh.
- Host: GitHub
- URL: https://github.com/the-lemonboy/tailwindcss-px-to-viewport
- Owner: the-lemonboy
- License: mit
- Created: 2025-02-10T06:42:42.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-07-27T11:10:59.000Z (11 months ago)
- Last Synced: 2025-10-23T05:21:13.393Z (8 months ago)
- Language: CSS
- Homepage:
- Size: 215 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- fucking-awesome-tailwindcss - px to viewport - Adds utilities to automatically convert px to vw / vh. (Plugins)
- awesome-tailwindcss - px to viewport - Adds utilities to automatically convert px to vw / vh. (Plugins)
README
# Tailwind CSS px-to-viewport
[](https://www.npmjs.com/package/tailwindcss-px-to-viewport) [](https://opensource.org/licenses/MIT)
English | [δΈζ](README_CN.md)
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:
```bash
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):
```javascript
// 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:
```css
@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](LICENSE).