{"id":17531260,"url":"https://github.com/MellowCo/unocss-preset-weapp","last_synced_at":"2025-03-06T10:32:21.253Z","repository":{"id":39983206,"uuid":"507292420","full_name":"MellowCo/unocss-preset-weapp","owner":"MellowCo","description":"unocss preset for wechat miniprogram，unocss小程序预设，在 taro uniapp 原生小程序 中使用unocss","archived":false,"fork":false,"pushed_at":"2025-01-18T03:39:12.000Z","size":5498,"stargazers_count":401,"open_issues_count":1,"forks_count":36,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-12T22:41:15.793Z","etag":null,"topics":["miniprogram","taro","uniapp","unocss","vite","webpack"],"latest_commit_sha":null,"homepage":"https://playful-gumption-4bb42b.netlify.app","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/MellowCo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2022-06-25T11:27:59.000Z","updated_at":"2025-02-11T08:58:48.000Z","dependencies_parsed_at":"2024-02-03T01:35:43.267Z","dependency_job_id":"9f4277c2-4dcd-4d29-ab1e-04e08980b496","html_url":"https://github.com/MellowCo/unocss-preset-weapp","commit_stats":{"total_commits":377,"total_committers":5,"mean_commits":75.4,"dds":0.09018567639257291,"last_synced_commit":"03a816d956c9b6ac4fe2d3dd0edb08a896191d0b"},"previous_names":["mellowco/unocss-prest-weapp"],"tags_count":81,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MellowCo%2Funocss-preset-weapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MellowCo%2Funocss-preset-weapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MellowCo%2Funocss-preset-weapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MellowCo%2Funocss-preset-weapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MellowCo","download_url":"https://codeload.github.com/MellowCo/unocss-preset-weapp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242191596,"owners_count":20087010,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["miniprogram","taro","uniapp","unocss","vite","webpack"],"created_at":"2024-10-20T17:23:24.003Z","updated_at":"2025-03-06T10:32:20.637Z","avatar_url":"https://github.com/MellowCo.png","language":"CSS","funding_links":[],"categories":["Presets","Community"],"sub_categories":["Presets"],"readme":"# unocss-preset-weapp\n\n[UnoCSS](https://github.com/unocss/unocss) 小程序预设 [unocss-preset-weapp](https://github.com/MellowCo/unocss-preset-weapp)\n\n---\n\n内置 `transformer` 用于兼容小程序\n\n*  [transformerClass](https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass) 转换转义类名，解决小程序不支持`\\\\`，`\\:`，`\\[`， `\\$`，`\\.`等转义类名，保持`原子化css`的规范去书写`class`\n*  [transformerAttributify](https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify)，用于支持 [attributify mode](https://github.com/unocss/unocss/tree/main/packages/preset-attributify#attributify-mode)\n---\n\n[uniapp-vue3 demo 在线地址](https://playful-gumption-4bb42b.netlify.app) [demo github](https://github.com/MellowCo/unocss-uniapp-demo)\n\n## 使用\n\n### uniapp-vue2\n[使用配置与DEMO](https://github.com/MellowCo/unocss-preset-weapp/tree/main/examples/uniapp_vue2)\n\n### uniapp-vue3\n[使用配置与DEMO](https://github.com/MellowCo/unocss-preset-weapp/tree/main/examples/uniapp_vue3)\n\n### taro for react vue2 vue3\n[使用配置与DEMO](https://github.com/MellowCo/unocss-preset-weapp/tree/main/examples/taro_webpack4_vue3)\n\n### 原生微信小程序 wxml\n[使用配置与DEMO](https://github.com/MellowCo/unocss-wechat)\n\n## PresetWeappOptions\n```ts\nexport interface PresetWeappOptions extends PresetOptions {\n  /**\n   * 是否转换微信class\n   *\n   * @default true\n   */\n  transform?: boolean\n\n  /**\n   * 平台\n   * @default 'uniapp'\n   */\n  platform?: 'taro' | 'uniapp'\n\n  /**\n   * taro h5 rem 换算尺寸标准\n   * @default 750\n   * @link https://taro-docs.jd.com/taro/docs/size\n   */\n  designWidth?: number\n\n  /**\n   * taro 设计稿尺寸换算规则\n   * @default { 640: 2.34 / 2, 750: 1, 828: 1.81 / 2}\n   * @link https://taro-docs.jd.com/taro/docs/size\n   */\n  deviceRatio?: Record\u003cnumber, number\u003e\n\n  /**\n   * taro webpack 版本\n   * taro webpack4 和 webpack5 h5根字体大小，导致不同版本 rem 不一致\n   * 见下面issues\n   * @link https://github.com/NervJS/taro/issues/12361\n   * @default webpack4\n   */\n  taroWebpack?: 'webpack4' | 'webpack5'\n\n  /**\n   * 是否为h5\n   * @default false\n   */\n  isH5?: boolean\n\n  /**\n   * 自定义转换规则\n   * @default https://github.com/MellowCo/unplugin-transform-class#options\n   */\n  transformRules?: Record\u003cstring, string\u003e\n\n  /**\n   * wh 是否使用 rpx 为默认单位\n   * @example\n   * ```\n   * whRpx: true\n   * w-10 -\u003e width: 10rpx\n   * h-10 -\u003e height: 10rpx\n   * ```\n   *\n   * @example\n   * ```\n   * whRpx: false\n   * w-10 -\u003e width: 80rpx\n   * h-10 -\u003e height: 80rpx\n   * ```\n   * @default true\n   */\n  whRpx?: boolean\n}\n```\n\n---\n\n## 其他\n\n### 修改 w h 默认单位\n\u003e 仅针对 width height postion 起作用\n\n\u003e padding margin 可通过 [配置rules](https://github.com/MellowCo/unocss-preset-weapp/issues/116) 覆盖\n\n\u003e unocss-preset-weapp，`whRpx` 默认为 `true`，wh默认单位 `rpx`，例如\n\n```css\n.text-20 {\n  font-size: 20rpx;\n}\n\n.h-10 {\n  height: 10rpx;\n}\n\n.top-10 {\n  top: 10rpx;\n}\n```\n\n\u003e 设置 `whRpx` 为 `false`，修改默认单位，按 `rem` 规则递增\n\n* unocss.config.ts\n```ts\nimport presetWeapp from 'unocss-preset-weapp'\n\nexport default defineConfig({\n  presets: [\n    presetWeapp({\n      whRpx: false,\n    }),\n  ],\n})\n```\n\n```css\n.text-20 {\n  font-size: 160rpx;\n}\n\n.h-10 {\n  height: 80rpx;\n}\n\n.top-10 {\n  top: 80rpx;\n}\n```\n### attributify autocomplete (v0.53.1)\n\n\u003e 使 `transformerAttributify` 获取 vscode插件 `autocomplete`提示\n\n![](./assets/Snipaste_2023-06-17_19-53-21.png)\n\n\u003e 使用 extractorAttributify 生成 presetWeappAttributify ，transformerAttributify\n\u003e\n\u003e presetWeappAttributify 用于vscode插件 autocomplete 提示\n\u003e\n\u003e transformerAttributify 用于支持 attributify mode\n\n```ts\nimport presetWeapp from 'unocss-preset-weapp'\nimport { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'\n\nconst { presetWeappAttributify, transformerAttributify } = extractorAttributify()\n\nexport default {\n  presets: [\n    // https://github.com/MellowCo/unocss-preset-weapp\n    presetWeapp(),\n    // attributify autocomplete\n    presetWeappAttributify(),\n  ],\n  shortcuts: [\n    {\n      'border-base': 'border border-gray-500_10',\n      'center': 'flex justify-center items-center',\n    },\n  ],\n  transformers: [\n    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify\n    transformerAttributify(),\n\n    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass\n    transformerClass(),\n  ],\n}\n```\n\n### 自定义转换规则\n\u003e 如需更改或添加默认的转换规则，可通过 `transformRules` 进行修改\n\n[默认转换规则](https://github.com/MellowCo/unplugin-transform-class#usage)\n\n* unocss.config.js\n```ts\nimport { defineConfig } from 'unocss'\nimport presetWeapp from 'unocss-preset-weapp'\nimport { defaultRules, extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'\n\nconst transformRules = {\n  ...defaultRules,\n  '.': '-d111-',\n  '/': '-s111-',\n  ':': '-c111-',\n  '%': '-p111-',\n  '!': '-e111-',\n  '#': '-w111-',\n  '(': '-b111l-',\n  ')': '-b111r-',\n  '[': '-f111l-',\n  ']': '-f111r-',\n  '$': '-r111-',\n  ',': '-r222-',\n}\n\nconst { presetWeappAttributify, transformerAttributify } = extractorAttributify({\n  transformRules\n})\n\nexport default defineConfig({\n  presets: [\n    // https://github.com/MellowCo/unocss-preset-weapp\n    presetWeapp({\n      transformRules,\n    }),\n    // attributify autocomplete\n    presetWeappAttributify()\n  ],\n  transformers: [\n    // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify\n    transformerAttributify(),\n\n    // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass\n    transformerClass({\n      transformRules,\n    }),\n  ],\n})\n```\n\n---\n### 原子化 css 冲突问题\n\u003e 例如 [tmui](https://tmui.design/)，自身有一套[原子化 css](https://tmui.design/doc/CSSTool/css.html)，导致与 unocss 冲突\n\n![](https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202208311130610.png)\n\n* unocss.config.ts\n\n\u003e `presetWeapp` 配置 `prefix`, `transformerAttributify` 配置 `classPrefix`\n\n```ts\nimport { defineConfig } from 'unocss'\nimport presetWeapp from 'unocss-preset-weapp'\nimport { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'\n\nconst prefix = 'li-'\n\nconst { presetWeappAttributify, transformerAttributify } = extractorAttributify({\n  classPrefix: prefix\n})\n\nexport default defineConfig({\n  presets: [\n    // https://github.com/MellowCo/unocss-preset-weapp\n    presetWeapp({\n      prefix\n    }),\n\n    // attributify autocomplete\n    presetWeappAttributify()\n  ],\n  transformers: [\n    // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify\n    transformerAttributify(),\n\n    // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass\n    transformerClass(),\n  ],\n})\n```\n\n\u003e 这样冲突问题就解决了\n```html\n\u003cview bg=\"#333\" p=\"x-6 y-10\" w100 h200 class=\"li-bg-red\"\u003e\n  this is a unocss\n\u003c/view\u003e\n```\n\ntransform\n```html\n\u003cview class=\"li-bg-red li-bg-#333 li-p-x-6 li-p-y-10 li-w100 li-200\"\u003e\n  this is a unocss\n\u003c/view\u003e\n```\n\n![](https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202208311149877.png)\n\n[tm-ui-demo](https://github.com/MellowCo/unplugin-attributify-to-class/tree/master/examples/tm-ui-demo)\n\n---\n### 开发时，微信等浏览器白屏问题\n因为浏览器的兼容问题，不支持 `TopLevelAwait` 导致白屏\n![](https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202301130826739.png)\n\n\u003e 目前 [unocss@0.48.4](https://github.com/unocss/unocss/releases/tag/v0.48.4) 版本新增 `hmrTopLevelAwait` 选项，可关闭 `TopLevelAwait` 以支持某些浏览器\n\n```ts\n// https://github.com/antfu/unocss\nUnocss({\n  hmrTopLevelAwait: false,\n})\n```\n\n## css预设\n[UnoCSS 文档](https://unocss.dev/) | [交互式文档](https://unocss.dev/interactive/) | [练习场](https://unocss.dev/play/)\n\n[Windi CSS文档](https://windicss.org/)\n\n\u003e 默认单位`rpx`，w-100 =\u003e w-100rpx\n\u003e\n\n### 渐变背景 (v0.1.12)\n\n[gradients](https://cn.windicss.org/utilities/backgrounds/gradients.html)\n\n```html\n\u003cview class=\"bg-gradient-to-t from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70\"\u003e\u003c/view\u003e\n```\n\n\u003cimg src=\"https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202208281630260.png\" style=\"zoom: 50%;\" /\u003e\n\n### animation (v0.1.9)\n参考 [windicss-animation](https://cn.windicss.org/utilities/animations/animation.html) [@windicss/plugin-animations](https://cn.windicss.org/plugins/community/animations.html)\n\n相关动画网站 [animate.css](https://animate.style/) [animista.net](https://animista.net/play/basic)\n\n* unocss.config.js 自定义动画\n\n```js\nimport { defineConfig } from 'unocss'\nimport presetWeapp from 'unocss-preset-weapp'\n\nexport default defineConfig({\n  presets: [\n    // https://github.com/MellowCo/unocss-preset-weapp\n    presetWeapp(),\n  ],\n  theme: {\n    // v0.1.9 加入动画预设\n    // https://github.com/MellowCo/unocss-preset-weapp#animation-v019\n    // 设置自定义动画\n    animation: {\n      keyframes: {\n        'my-animation': '{0% {letter-spacing: -0.5em;transform: translateZ(-700px);opacity: 0;}40% {opacity: 0.6;}100% {transform: translateZ(0);opacity: 1;}}',\n      },\n      durations: {\n        'my-animation': '0.8s',\n      },\n      counts: {\n        'my-animation': 'infinite',\n      },\n      timingFns: {\n        'my-animation': 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',\n      },\n    },\n  },\n})\n```\n\n```html\n\u003cview class=\"animate-pulse\"\u003e\u003c/view\u003e\n\n\u003cview class=\"animate-back-in-down animate-iteration-infinite\"\u003e\u003c/view\u003e\n\n\u003cview class=\"animate-[4s_linear_0s_infinite_alternate_bounce]\"\u003e\u003c/view\u003e\n\n.animate--fl-4s_linear_0s_infinite_alternate_bounce-fr- {\n  -webkit-animation: 4s linear 0s infinite alternate bounce;\n  animation: 4s linear 0s infinite alternate bounce;\n}\n```\n\n\u003cimg src=\"https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202208211944041.gif\" style=\"zoom: 50%;\" /\u003e\n\n### safe-area (v0.1.6)\n| class                             | Properties       |\n| ----------------------- | ---------------- |\n| p-safe            | padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)     |\n| pt-safe          | padding-top: env(safe-area-inset-top) |\n| pb-safe           | padding-bottom: env(safe-area-inset-bottom)    |\n| pl-safe          | padding-left: env(safe-area-inset-left)     |\n| pr-safe               | padding-right: env(safe-area-inset-right)   |\n\n### width and height\n\n| class                      | Properties       |\n| -------------------------- | ---------------- |\n| h-1_2\u003cbr/\u003eh-1/2\u003cbr/\u003eh-half | height: 50%      |\n| w-1_3\u003cbr/\u003ew-1/3            | width: 33.33333% |\n| h-full                     | height: 100%     |\n| w-20                       | width: 20rpx     |\n| h-xs                       | height: 180rpx   |\n\n\u003e 预设\n\n```js\nexport const baseSize = {\n  'xs': '180rpx',\n  'sm': '220rpx',\n  'md': '260rpx',\n  'lg': '300rpx',\n  'xl': '340rpx',\n  '2xl': '390rpx',\n  '3xl': '440rpx',\n  '4xl': '490rpx',\n  '5xl': '540rpx',\n  '6xl': '590rpx',\n  '7xl': '640rpx',\n  '8xl': '690rpx',\n  '9xl': '740rpx',\n  'full': '100%',\n  'half': '50%',\n}\n```\n\n---\n\n### border\n\n| class                                      | Properties                            |\n| ------------------------------------------ | ------------------------------------- |\n| border-2                                   | border-width:2rpx;border-style:solid; |\n| b-2                                        | border-width:2rpx;border-style:solid; |\n| border-dashed                              | border-style:dashed                   |\n| rounded-1_2\u003cbr\u003erounded-1/2\u003cbr\u003erounded-half | border-radius:50%                     |\n| rounded-md                                 | border-radius:12rpx                   |\n\n\u003e 预设\n\n```js\nexport const borderRadius = {\n  'DEFAULT': '8rpx',\n  'none': '0',\n  'sm': '4rpx',\n  'md': '12rpx',\n  'lg': '16rpx',\n  'xl': '24rpx',\n  '2xl': '32rpx',\n  '3xl': '48rpx',\n  'half': '50%',\n  'full': '9999px',\n}\n```\n\n---\n\n### border-color\n\n| class                                                   | Properties                                                   |\n| ------------------------------------------------------- | ------------------------------------------------------------ |\n| border-red-100\u003cbr/\u003eborder-red-1                         | --un-border-opacity:1;  border-color:rgba(254,226,226,var(--un-border-opacity)) |\n| border-opacity-20\u003cbr/\u003eborder-op-20\u003cbr/\u003e                 | --un-border-opacity:0.2                                      |\n| border-black_10\u003cbr/\u003eborder-black/10\u003cbr/\u003eborder-black:10 | border-color:rgba(0,0,0,0.1)                                 |\n\n---\n### color\n\n| class                                                        | Properties                                                   |\n| ------------------------------------------------------------ | ------------------------------------------------------------ |\n| op-10\u003cbr/\u003eopacity-10                                         | opacity:0.1                                                  |\n| color-hex-157\u003cbr/\u003ec-hex-157\u003cbr/\u003ec-[#157]                     | --un-text-opacity:1;color:rgba(17,85,119,var(--un-text-opacity)) |\n| c-hex-157_10\u003cbr/\u003ec-hex-157/10\u003cbr/\u003ec-[#157]/10\u003cbr/\u003ec-[#157]:10\u003cbr/\u003ec-[#157]_10 | color:rgba(17,85,119,0.1)                                    |\n| color-blue,\u003cbr/\u003ecolor-blue-400,\u003cbr/\u003ec-blue                   | --un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity)) |\n| text-red-100\u003cbr/\u003etext-red100\u003cbr/\u003etext-red1                   | --un-text-opacity:1;color:rgba(254,226,226,var(--un-text-opacity)) |\n| text-red-100_20\u003cbr/\u003etext-red-100/20\u003cbr/\u003etext-red-100:20      | color:rgba(254,226,226,0.2)                                  |\n\n### bg\n\n| class                                                        | Properties                                                   |\n| ------------------------------------------------------------ | ------------------------------------------------------------ |\n| bg-hex-452233_40\u003cbr/\u003ebg-[#452233]_40\u003cbr/\u003ebg-[#452233]/40\u003cbr/\u003ebg-[#452233]:40 | background-color:rgba(69,34,51,0.4)                          |\n| bg-red-100\u003cbr/\u003ebg-red1\u003cbr/\u003ebg-red100                         | --un-bg-opacity:1;background-color:rgba(254,226,226,var(--un-bg-opacity)) |\n| bg-teal-100_55\u003cbr/\u003ebg-teal-100/55\u003cbr/\u003ebg-teal-100:55         | background-color:rgba(204,251,241,0.55)                      |\n| bg-opacity-45                                                | --un-bg-opacity:0.45                                         |\n\n### typography\n\n| class                                    | Properties                                                   |\n| ---------------------------------------- | ------------------------------------------------------------ |\n| text-base                                | font-size:32rpx;line-height:48rpx                            |\n| text-100\u003cbr/\u003etext-size-100               | font-size:100rpx                                             |\n| text-2em                                 | font-size:2em                                                |\n| font-900,\u003cbr/\u003efont-black\u003cbr/\u003efw-900      | font-weight:900                                              |\n| font-leading-2 \u003cbr/\u003eleading-2            | line-height:16rpx                                            |\n| indent                                   | text-indent:48rpx                                            |\n| indent-2                                 | text-indent:16rpx                                            |\n| indent-1_2\u003cbr/\u003eindent-1/2\u003cbr/\u003eindent-1:2 | text-indent:50%                                              |\n| indent-lg                                | text-indent:64rpx                                            |\n| text-shadow-lg                           | --un-text-shadow:6rpx 6rpx 12rpx var(--un-text-shadow-color, rgba(0,0,0,0.26)),0 0 10rpx var(--un-text-shadow-color, rgba(15,3,86,0.22));text-shadow:var(--un-text-shadow) |\n| word-spacing-2                           | word-spacing:16rpx                                           |\n| tracking-2                               | letter-spacing:16rpx                                         |\n\n\u003e fontSize预设 `text-base`\n\n```ts\nexport const fontSize: Theme['fontSize'] = {\n  'xs': ['24rpx', '32rpx'],\n  'sm': ['28rpx', '40rpx'],\n  'base': ['32rpx', '48rpx'],\n  'lg': ['36rpx', '56rpx'],\n  'xl': ['40rpx', '56rpx'],\n  '2xl': ['48rpx', '64rpx'],\n  '3xl': ['60rpx', '72rpx'],\n  '4xl': ['72rpx', '80rpx'],\n  '5xl': ['96rpx', '1'],\n  '6xl': ['120rpx', '1'],\n  '7xl': ['144rpx', '1'],\n  '8xl': ['192rpx', '1'],\n  '9xl': ['256rpx', '1'],\n}\n```\n```\ntext-100 =\u003e font-size:100rpx\n```\n\n\u003e textIndent 预设 `indent-lg`\n```js\nexport const textIndent = {\n  'DEFAULT': '48rpx',\n  'xs': '16rpx',\n  'sm': '32rpx',\n  'md': '48rpx',\n  'lg': '64rpx',\n  'xl': '80rpx',\n  '2xl': '96rpx',\n  '3xl': '128rpx',\n}\n```\n\n\u003e `leadings`  `tracking`  `word-spacing`  `indent` 计算方式\n\n`indent-2` 原为 `text-indent: 0.5rem` 等于 `8px` ,\n\n小程序使用 `750rpx` 的基准是 `2倍px` 等于 `16rpx` ,\n\n所以计算为 `2*0.5*1rem = 2*0.5*16px = 16rpx`\n\n```css\nindent-2\ntext-indent: 0.5rem\ntext-indent: 16rpx\n\ntracking-2\nletter-spacing: 0.5rem\nletter-spacing:16rpx\n\nword-spacing-2\nword-spacing: 0.5rem\nword-spacing:16rpx\n\nleadings-2\nline-height: 0.5rem\nline-height:16rpx\n```\n\n### spacing\n\n| class   | Properties                           |\n| ------- | ------------------------------------ |\n| p-2,p2  | padding:16rpx                        |\n| mx-2    | margin-left:16rpx;margin-right:16rpx |\n| -m-lg   | margin:-36rpx                        |\n| pl-10px | padding-left:10px                    |\n| m-10rpx | margin:10rpx                         |\n\u003e 预设\n\n```ts\nexport const spacing = {\n  'DEFAULT': '32rpx',\n  'none': '0',\n  'xs': '24rpx',\n  'sm': '28rpx',\n  'md': '36rpx',\n  'lg': '40rpx',\n  'xl': '48rpx',\n  '2xl': '60rpx',\n  '3xl': '72rpx',\n  '4xl': '96rpx',\n  '5xl': '120rpx',\n  '6xl': '144rpx',\n  '7xl': '192rpx',\n  '8xl': '256rpx',\n}\n```\n\n### box-shadow\n\n\u003e 预设\n\n```js\nexport const boxShadow = {\n  'DEFAULT': ['var(--un-shadow-inset) 0 1px 3px 0 rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 1px 2px -1px rgba(0,0,0,0.1)'],\n  'none': '0 0 rgba(0,0,0,0)',\n  'sm': 'var(--un-shadow-inset) 0 1px 2px 0 rgba(0,0,0,0.05)',\n  'md': ['var(--un-shadow-inset) 0 4px 6px -1px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 2px 4px -2px rgba(0,0,0,0.1)'],\n  'lg': ['var(--un-shadow-inset) 0 10px 15px -3px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 4px 6px -4px rgba(0,0,0,0.1)'],\n  'xl': ['var(--un-shadow-inset) 0 20px 25px -5px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 8px 10px -6px rgba(0,0,0,0.1)'],\n  '2xl': 'var(--un-shadow-inset) 0 25px 50px -12px rgba(0,0,0,0.25)',\n  'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.05)',\n}\n```\n\n\u003e 连体写法\n```html\n\u003cview class=\"shadow-[0px_4px_4px_0px_rgba(237,_0,_0,_1)]\"\u003e\u003c/view\u003e\n```\n\n### flex gap\n\n| class          | Properties                              |\n| -------------- | --------------------------------------- |\n| flex-basis-1_2 | flex-basis:50%                          |\n| flex-basis-2   | flex-basis:16rpx                        |\n| gap-4          | grid-gap:32rpx;gap:32rpx                |\n| gap-x-2        | grid-column-gap:16rpx;column-gap:16rpx; |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMellowCo%2Funocss-preset-weapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMellowCo%2Funocss-preset-weapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMellowCo%2Funocss-preset-weapp/lists"}