1.安装postcss-px-to-viewport-8-plugin插件

pnpm install postcss-px-to-viewport-8-plugin

2.根目录下创建.postcssrc.json文件或postcss.config.ts文件

(个人比较喜欢.postcssrc.json)

.postcssrc.json文件内容

{
  "plugins": {
    "tailwindcss": {},
    "autoprefixer": {},
    "postcss-px-to-viewport-8-plugin": {
      "unitToConvert": "px",
      "viewportWidth": 2100,
      "viewportHeight": 1180,
      "unitPrecision": 5,
      "propList": [
        "*"
      ],
      "viewportUnit": "vw",
      "fontViewportUnit": "vw",
      "selectorBlackList": [
        ".no_change_px"
      ],
      "minPixelValue": 1,
      "mediaQuery": false,
      "replace": true
    }
  }
}

postcss.config.ts文件内容

module.exports = {
   "plugins": {
    "tailwindcss": {},
    "autoprefixer": {},
    "postcss-px-to-viewport-8-plugin": {
      "unitToConvert": "px",
      "viewportWidth": 1920,//设计图宽
      "viewportHeight": 1080,//设计图高
      "unitPrecision": 5,
      "propList": [
        "*"
      ],
      "viewportUnit": "vw",
      "fontViewportUnit": "vw",
      "selectorBlackList": [
        ".no_change_px"
      ],
      "minPixelValue": 1,
      "mediaQuery": false,
      "replace": true
    }
  }
  }