Skip to content

Commit 767183c

Browse files
the-lemonboythe-lemonboy
committed
docs: Optimize documentation
1 parent e96dacc commit 767183c

File tree

2 files changed

+42
-44
lines changed

2 files changed

+42
-44
lines changed

‎README.md‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44

55
English | [中文](README_CN.md)
66

7-
Tailwind CSS plugin that intelligently converts `px` unit properties into viewport units (`vw` or `vh`), helping with responsive layout development.
8-
9-
---
7+
A tailwindcss plugin that automatically converts **px** unit properties to viewport units **vw** or **vh**.
108

119
## Installation
1210

@@ -17,8 +15,10 @@ npm install tailwindcss-px-to-viewport --save-dev
1715
```
1816

1917
## Configuration Guide
18+
2019
Basic configuration example:
2120
Add the plugin to the Tailwind CSS configuration file (tailwind.config.js):
21+
2222
```javascript
2323
// tailwind.config.js
2424
import pxToViewport from 'tailwindcss-px-to-viewport'
@@ -47,46 +47,46 @@ export default {
4747

4848
## Configuration Parameters
4949

50-
| **Parameter** | **Type** | **Default Value** | **Description** |
51-
|-------------------|-----------|-------------------|---------------------------------|
52-
| `viewportWidth` | number | 1920 | Base design width (in px) |
53-
| `viewportHeight` | number | 1080 | Base design height (in px) |
50+
| **Parameter** | **Type** | **Default Value** | **Description** |
51+
| ------------------- | -------------- | ----------------------- | -------------------------- |
52+
| `viewportWidth` | number | 1920 | Base design width (in px) |
53+
| `viewportHeight` | number | 1080 | Base design height (in px) |
5454

5555
## Usage Syntax
5656

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

59-
## Utility Class Mapping
60-
61-
| **tailwindcss Property** | **Generated CSS Property** | **Conversion Rule** | **Result** |
62-
|----------------------|----------------------------|-----------------------------------------|------------------------------------|
63-
| `pw-w-[value]` | width | px → (value/`viewportWidth`)*100 | `width: [*] vw` |
64-
| `pw-h-[value]` | height | px → (value/`viewportHeight`)*100 | `height: [*] vh` |
65-
| `pw-min-w-[value]` | min-width | px → (value/`viewportWidth`)*100 | `min-width: [*] vw` |
66-
| `pw-max-w-[value]` | max-width | px → (value/`viewportWidth`)*100 | `max-width: [*] vw` |
67-
| `pw-min-h-[value]` | min-height | px → (value/`viewportHeight`)*100 | `min-height: [*] vh` |
68-
| `pw-max-h-[value]` | max-height | px → (value/`viewportHeight`)*100 | `max-height: [*] vh` |
69-
| `pw-text-[value]` | font-size | px → (value/`viewportWidth`)*100 | `font-size: [*] vw` |
70-
| `pw-leading-[value]` | line-height | px → (value/`viewportHeight`)*100 | `line-height: [*] vh` |
71-
| `pw-indent-[value]` | text-indent | px → (value/`viewportWidth`)*100 | `text-indent: [*] vw` |
72-
| `pw-top-[value]` | top | px → (value/`viewportHeight`)*100 | `top: [*] vh` |
73-
| `pw-right-[value]` | right | px → (value/`viewportWidth`)*100 | `right: [*] vw` |
74-
| `pw-bottom-[value]` | bottom | px → (value/`viewportHeight`)*100 | `bottom: [*] vh` |
75-
| `pw-left-[value]` | left | px → (value/`viewportWidth`)*100 | `left: [*] vw` |
76-
| `pw-m-[value]` | margin | px → (value/`viewportWidth`)*100 | `margin: [*] vw/vh` |
77-
| `pw-mt-[value]` | margin-top | px → (value/`viewportHeight`)*100 | `margin-top: [*] vh` |
78-
| `pw-mr-[value]` | margin-right | px → (value/`viewportWidth`)*100 | `margin-right: [*] vw` |
79-
| `pw-mb-[value]` | margin-bottom | px → (value/`viewportHeight`)*100 | `margin-bottom: [*] vh` |
80-
| `pw-ml-[value]` | margin-left | px → (value/`viewportWidth`)*100 | `margin-left: [*] vw` |
81-
| `pw-mx-[value]` | margin-left/right | px → (value/`viewportWidth`)*100 | `margin-left/right: [*] vw` |
82-
| `pw-my-[value]` | margin-top/bottom | px → (value/`viewportHeight`)*100 | `margin-top/bottom: [*] vh` |
83-
| `pw-p-[value]` | padding | px → (value/`viewportWidth`)*100 | `padding: [*] vw/vh` |
84-
| `pw-pt-[value]` | padding-top | px → (value/`viewportHeight`)*100 | `padding-top: [*] vh` |
85-
| `pw-pr-[value]` | padding-right | px → (value/`viewportWidth`)*100 | `padding-right: [*] vw` |
86-
| `pw-pb-[value]` | padding-bottom | px → (value/`viewportHeight`)*100 | `padding-bottom: [*] vh` |
87-
| `pw-pl-[value]` | padding-left | px → (value/`viewportWidth`)*100 | `padding-left: [*] vw` |
88-
| `pw-px-[value]` | padding-left/right | px → (value/`viewportWidth`)*100 | `padding-left/right: [*] vw` |
89-
| `pw-py-[value]` | padding-top/bottom | px → (value/`viewportHeight`)*100 | `padding-top/bottom: [*] vh` |
59+
## Property Mapping
60+
61+
| **tailwindcss Property** | **Generated CSS Property** | **Conversion Rule** | **Result** |
62+
| ------------------------------ | -------------------------------- | ------------------------------------ | ------------------------------ |
63+
| `pw-w-[value]` | width | px → (value/`viewportWidth`)*100 | `width: [*] vw` |
64+
| `pw-h-[value]` | height | px → (value/`viewportHeight`)*100 | `height: [*] vh` |
65+
| `pw-min-w-[value]` | min-width | px → (value/`viewportWidth`)*100 | `min-width: [*] vw` |
66+
| `pw-max-w-[value]` | max-width | px → (value/`viewportWidth`)*100 | `max-width: [*] vw` |
67+
| `pw-min-h-[value]` | min-height | px → (value/`viewportHeight`)*100 | `min-height: [*] vh` |
68+
| `pw-max-h-[value]` | max-height | px → (value/`viewportHeight`)*100 | `max-height: [*] vh` |
69+
| `pw-text-[value]` | font-size | px → (value/`viewportWidth`)*100 | `font-size: [*] vw` |
70+
| `pw-leading-[value]` | line-height | px → (value/`viewportHeight`)*100 | `line-height: [*] vh` |
71+
| `pw-indent-[value]` | text-indent | px → (value/`viewportWidth`)*100 | `text-indent: [*] vw` |
72+
| `pw-top-[value]` | top | px → (value/`viewportHeight`)*100 | `top: [*] vh` |
73+
| `pw-right-[value]` | right | px → (value/`viewportWidth`)*100 | `right: [*] vw` |
74+
| `pw-bottom-[value]` | bottom | px → (value/`viewportHeight`)*100 | `bottom: [*] vh` |
75+
| `pw-left-[value]` | left | px → (value/`viewportWidth`)*100 | `left: [*] vw` |
76+
| `pw-m-[value]` | margin | px → (value/`viewportWidth`)*100 | `margin: [*] vw/vh` |
77+
| `pw-mt-[value]` | margin-top | px → (value/`viewportHeight`)*100 | `margin-top: [*] vh` |
78+
| `pw-mr-[value]` | margin-right | px → (value/`viewportWidth`)*100 | `margin-right: [*] vw` |
79+
| `pw-mb-[value]` | margin-bottom | px → (value/`viewportHeight`)*100 | `margin-bottom: [*] vh` |
80+
| `pw-ml-[value]` | margin-left | px → (value/`viewportWidth`)*100 | `margin-left: [*] vw` |
81+
| `pw-mx-[value]` | margin-left/right | px → (value/`viewportWidth`)*100 | `margin-left/right: [*] vw` |
82+
| `pw-my-[value]` | margin-top/bottom | px → (value/`viewportHeight`)*100 | `margin-top/bottom: [*] vh` |
83+
| `pw-p-[value]` | padding | px → (value/`viewportWidth`)*100 | `padding: [*] vw/vh` |
84+
| `pw-pt-[value]` | padding-top | px → (value/`viewportHeight`)*100 | `padding-top: [*] vh` |
85+
| `pw-pr-[value]` | padding-right | px → (value/`viewportWidth`)*100 | `padding-right: [*] vw` |
86+
| `pw-pb-[value]` | padding-bottom | px → (value/`viewportHeight`)*100 | `padding-bottom: [*] vh` |
87+
| `pw-pl-[value]` | padding-left | px → (value/`viewportWidth`)*100 | `padding-left: [*] vw` |
88+
| `pw-px-[value]` | padding-left/right | px → (value/`viewportWidth`)*100 | `padding-left/right: [*] vw` |
89+
| `pw-py-[value]` | padding-top/bottom | px → (value/`viewportHeight`)*100 | `padding-top/bottom: [*] vh` |
9090

9191
## License
9292

‎README_CN.md‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,15 @@
44

55
[English](README.md) | 中文
66

7-
Tailwind CSS plugin that intelligently converts `px` unit properties into viewport units (`vw` or `vh`), helping with responsive layout development.
8-
9-
---
7+
Tailwind CSS 插件，支持将 **px** 单位属性自动转换为视口单位 **vw** 或 **vh。**
108

119
## Installation
1210

13-
Install via npm:
11+
通过npm安装
1412

1513
```bash
1614
npm install tailwindcss-px-to-viewport --save-dev
17-
15+
```
1816

1917
## 配置指南
2018

@@ -58,7 +56,7 @@ export default {
5856

5957
使用 `pw+utility` 可以将 `px` 单位转换为 `vw`，而使用 `ph+utility` 则可以将 `px` 单位转换为 `vh`。
6058

61-
## Utility 类映射
59+
## 属性映射
6260

6361
| **tailwindcss 属性** | **生成的 CSS 属性** | **转换规则** | **结果** |
6462
| -------------------------- | ------------------------- | ------------------------------------ | ------------------------------ |

0 commit comments

Comments
 (0)