{"id":25380250,"url":"https://github.com/the-lemonboy/tailwindcss-px-to-viewport","last_synced_at":"2026-01-24T14:39:08.057Z","repository":{"id":276750251,"uuid":"930149443","full_name":"the-lemonboy/tailwindcss-px-to-viewport","owner":"the-lemonboy","description":"Tailwind CSS plugin that automatically converts px unit properties to viewport units vw or vh.","archived":false,"fork":false,"pushed_at":"2025-07-27T11:10:59.000Z","size":220,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-23T05:21:13.393Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/the-lemonboy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-10T06:42:42.000Z","updated_at":"2025-09-15T01:29:01.000Z","dependencies_parsed_at":"2025-05-26T11:17:51.947Z","dependency_job_id":null,"html_url":"https://github.com/the-lemonboy/tailwindcss-px-to-viewport","commit_stats":null,"previous_names":["the-lemonboy/tailwindcss-px-to-viewport"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/the-lemonboy/tailwindcss-px-to-viewport","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-lemonboy%2Ftailwindcss-px-to-viewport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-lemonboy%2Ftailwindcss-px-to-viewport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-lemonboy%2Ftailwindcss-px-to-viewport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-lemonboy%2Ftailwindcss-px-to-viewport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/the-lemonboy","download_url":"https://codeload.github.com/the-lemonboy/tailwindcss-px-to-viewport/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-lemonboy%2Ftailwindcss-px-to-viewport/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28729922,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-24T10:24:43.181Z","status":"ssl_error","status_checked_at":"2026-01-24T10:24:36.112Z","response_time":89,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-15T06:01:10.412Z","updated_at":"2026-01-24T14:39:08.050Z","avatar_url":"https://github.com/the-lemonboy.png","language":"CSS","funding_links":[],"categories":["Plugins"],"sub_categories":[],"readme":"# Tailwind CSS px-to-viewport\n\n[![npm version](https://img.shields.io/npm/v/tailwindcss-px-to-viewport)](https://www.npmjs.com/package/tailwindcss-px-to-viewport) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\nEnglish | [中文](README_CN.md)\n\nTailwind CSS plugin that automatically converts **px** unit properties to viewport units **vw** or **vh**.\n\n## Features\n\n- 📏 Automatic viewport unit conversion based on design draft dimensions\n- 🖌️ Custom CSS property mapping rules\n- 💡 Dual support for width (vw) and height (vh) baselines\n\n## Installation\n\nInstall via npm:\n\n```bash\nnpm install tailwindcss-px-to-viewport --save-dev\n```\n\n## Configuration Guide\n\nBasic configuration example:\nAdd the plugin to the Tailwind CSS configuration file (tailwind.config.js):\n\n```javascript\n// tailwind.config.js\nimport pxToViewport from 'tailwindcss-px-to-viewport'\n\nexport default {\n  theme: {\n    extend: {\n      pxToViewPort: {\n        // Base viewport configuration\n        PresetScreen: {\n          width: 1920, // Default design width (in px)\n          height: 1080, // Default design height (in px)\n        },\n        // Custom extension rules (optional)\n        utilities: {\n          // Add custom conversion rules here\n\t\t'mt': 'margin-top',\n  \t\t'mx': ['margin-left', 'margin-right'], // More than one property is represented as an array\n  \t\t'my': ['margin-top', 'margin-bottom'],\n        }\n      },\n    },\n  },\n  plugins: [\n    pxToViewport() // Enable the plugin\n  ],\n}\n```\n\nIf you are using Tailwind CSS V4, you can configure the plugin directly in the global stylesheet:\n\n```css\n@import \"tailwindcss\";\n@plugin 'tailwindcss-px-to-viewport';\n```\n\n## Configuration Parameters\n\n| **Parameter** | **Type** | **Default Value** | **Description**      |\n| ------------------- | -------------- | ----------------------- | -------------------------- |\n| `viewportWidth`   | number         | 1920                    | Base design width (in px)  |\n| `viewportHeight`  | number         | 1080                    | Base design height (in px) |\n\n## Usage Syntax\n\nUsing `pw+utility` converts `px` units to `vw`, while using `ph+utility` converts `px` units to `vh`.\n\n## Property Mapping\n\n| **Tailwind CSS Property** | **Generated CSS Property** | **Conversion Rule**            | **Result**               |\n| ------------------------------- | -------------------------------- | ------------------------------------ | ------------------------------ |\n| `pw-w-[value]`                | width                            | px → (value/`viewportWidth`)*100  | `width: [*] vw`              |\n| `pw-h-[value]`                | height                           | px → (value/`viewportHeight`)*100 | `height: [*] vh`             |\n| `pw-min-w-[value]`            | min-width                        | px → (value/`viewportWidth`)*100  | `min-width: [*] vw`          |\n| `pw-max-w-[value]`            | max-width                        | px → (value/`viewportWidth`)*100  | `max-width: [*] vw`          |\n| `pw-min-h-[value]`            | min-height                       | px → (value/`viewportHeight`)*100 | `min-height: [*] vh`         |\n| `pw-max-h-[value]`            | max-height                       | px → (value/`viewportHeight`)*100 | `max-height: [*] vh`         |\n| `pw-text-[value]`             | font-size                        | px → (value/`viewportWidth`)*100  | `font-size: [*] vw`          |\n| `pw-leading-[value]`          | line-height                      | px → (value/`viewportHeight`)*100 | `line-height: [*] vh`        |\n| `pw-indent-[value]`           | text-indent                      | px → (value/`viewportWidth`)*100  | `text-indent: [*] vw`        |\n| `pw-top-[value]`              | top                              | px → (value/`viewportHeight`)*100 | `top: [*] vh`                |\n| `pw-right-[value]`            | right                            | px → (value/`viewportWidth`)*100  | `right: [*] vw`              |\n| `pw-bottom-[value]`           | bottom                           | px → (value/`viewportHeight`)*100 | `bottom: [*] vh`             |\n| `pw-left-[value]`             | left                             | px → (value/`viewportWidth`)*100  | `left: [*] vw`               |\n| `pw-m-[value]`                | margin                           | px → (value/`viewportWidth`)*100  | `margin: [*] vw/vh`          |\n| `pw-mt-[value]`               | margin-top                       | px → (value/`viewportHeight`)*100 | `margin-top: [*] vh`         |\n| `pw-mr-[value]`               | margin-right                     | px → (value/`viewportWidth`)*100  | `margin-right: [*] vw`       |\n| `pw-mb-[value]`               | margin-bottom                    | px → (value/`viewportHeight`)*100 | `margin-bottom: [*] vh`      |\n| `pw-ml-[value]`               | margin-left                      | px → (value/`viewportWidth`)*100  | `margin-left: [*] vw`        |\n| `pw-mx-[value]`               | margin-left/right                | px → (value/`viewportWidth`)*100  | `margin-left/right: [*] vw`  |\n| `pw-my-[value]`               | margin-top/bottom                | px → (value/`viewportHeight`)*100 | `margin-top/bottom: [*] vh`  |\n| `pw-p-[value]`                | padding                          | px → (value/`viewportWidth`)*100  | `padding: [*] vw/vh`         |\n| `pw-pt-[value]`               | padding-top                      | px → (value/`viewportHeight`)*100 | `padding-top: [*] vh`        |\n| `pw-pr-[value]`               | padding-right                    | px → (value/`viewportWidth`)*100  | `padding-right: [*] vw`      |\n| `pw-pb-[value]`               | padding-bottom                   | px → (value/`viewportHeight`)*100 | `padding-bottom: [*] vh`     |\n| `pw-pl-[value]`               | padding-left                     | px → (value/`viewportWidth`)*100  | `padding-left: [*] vw`       |\n| `pw-px-[value]`               | padding-left/right               | px → (value/`viewportWidth`)*100  | `padding-left/right: [*] vw` |\n| `pw-py-[value]`               | padding-top/bottom               | px → (value/`viewportHeight`)*100 | `padding-top/bottom: [*] vh` |\n\n## License\n\nThis project is licensed under the MIT License.[MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-lemonboy%2Ftailwindcss-px-to-viewport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthe-lemonboy%2Ftailwindcss-px-to-viewport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-lemonboy%2Ftailwindcss-px-to-viewport/lists"}