uniapp\ taro 如何使用 UnoCSS 原子化css

最新推荐文章于 2025-09-10 22:59:43 发布

原创

最新推荐文章于 2025-09-10 22:59:43 发布 · 3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #taro #css

本文介绍了unocss-preset-weapp，一个针对微信小程序优化的原子化CSS工具，提供了transformer、转换规则和自定义配置选项，如单位转换、安全区域、边框样式、颜色、间距等，帮助开发者更高效地构建小程序界面。

unocss-preset-weapp

相较于 tailwindcss 和 windicss, unocss的性能和可扩展性都优于它们

UnoCSS小程序预设 unocss-preset-weapp

内置 transformer 用于兼容小程序

transformerClass 转换转义类名，解决小程序不支持`\\`，`\:`，`\[`， `\$`，`\.`等转义类名,保持原子化css的规范去书写class
transformerAttributify，用于支持 attributify mode

uniapp-vue3 demo 在线地址playful-gumption-4bb42b.netlify.app/

使用

其他

修改 w h 默认单位

unocss-preset-weapp，wh默认单位 `rpx`，例如

.text-20 {
 font-size: 20rpx;
}

.h-10 {
 height: 10rpx;
}

.top-10 {
 top: 10rpx;
}

设置 whRpx为 false，修改默认单位，按 rem 规则递增

unocss.config.ts

import presetWeapp from 'unocss-preset-weapp'
export default defineConfig({
  presets: [
 presetWeapp({
      whRpx: false,
    }),
  ],
})

.text-20 {
 font-size: 160rpx;
}

.h-10 {
 height: 80rpx;
}

.top-10 {
 top: 160rpx;
}

自定义转换规则

如需更改默认的转换规则，可通过 transformRules 进行修改

unocss.config.js

import presetWeapp from 'unocss-preset-weapp'
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
import { define

最低0.47元/天解锁文章

uniapp\ taro 如何使用 UnoCSS 原子化css

unocss-preset-weapp

使用

uniapp-vue2

uniapp-vue3

taro for react vue2 vue3

原生微信小程序 wxml

其他

修改 w h 默认单位

自定义转换规则