前言
最近我自己搭了一套 移动端 uni-app + Vue3 + TypeScript + UnoCSS + uview-plus 的基础框架，目标是一套代码，多端运行，可以同时部署到 H5、微信小程序、App。
在 H5 环境 下，一切都非常美好： UnoCSS 写起来顺手又优雅，原子类随便用，开发体验直接拉满。
但当我把同一套代码 打包运行到微信小程序 时，问题立刻出现了—— 项目甚至还没跑起来，微信小程序 IDE 就直接报错，堪称“当场劝退”。
[ WXSS 文件编译错误 ]
./app.wxss(7997:2599): unexpected `\` at pos 170113
(env: Windows, mp, 1.06.2504060; lib: 3.14.0)
一开始我以为是配置问题、打包问题，甚至怀疑过 uni-app 或 uview-plus。 直到深入排查之后才发现，真正的“元凶”其实是 UnoCSS 的部分写法在微信小程序（WXSS）中并不被支持。
随后我只能回过头来，严格按照微信小程序可接受的 UnoCSS 写法，对样式进行了重新梳理和重构。 在经历了一轮“删中括号、改写法、禁用部分特性”的过程之后，项目才终于顺利在微信小程序中运行起来。
也正是这次踩坑，让我对 UnoCSS 在微信小程序中的可用边界 有了非常清晰的认识，这篇文章也正是对这次经历的总结。
一、 微信小程序 不支持 的 UnoCSS 写法（雷区）
🚫 1️⃣ 任意值（死亡率 100%）
w-[100px]
m-[20px]
px-[10rpx]
bg-[#fff]
你以为你在写 CSS， WXSS 看到的是：
.w-\[100px\] { ... }
WXSS：
你是不是往我这塞正则？
🚫 2️⃣ 变体写法（WXSS 完全不认识）
hover:bg-red-500
md:w-100
dark:bg-black
WXSS 的内心活动：
hover？md？ 你是不是把我当浏览器了？
🚫 3️⃣ 分数 / 高级数学
WXSS：
我只会 px，不会高数。
🚫 4️⃣ 自定义颜色 / 特殊字符
bg-[#fff]
text-[rgb(0,0,0)]
只要出现：
[ ] : # %
WXSS 直接拒绝交流
二、那到底哪些 UnoCSS 能在小程序里活下来？
好消息是： 不是 UnoCSS 全灭，只是被迫“回到朴素年代”。
✅ 微信小程序 支持 的 UnoCSS 写法（安全区）
✅ 1️⃣ 布局类（WXSS 认识）
flex
block
inline-block
hidden
flex-row
flex-col
items-start
items-center
items-end
justify-start
justify-center
justify-end
justify-between
✅ 2️⃣ 尺寸类（纯数字，别加戏）
w-10
w-50
w-100
h-40
h-100
w-100 = width: 100px。不支持 rpx，不支持中括号。
✅ 3️⃣ 间距类（老实人专用）
m-0
m-10
m-20
mt-10
mb-10
ml-10
mr-10
p-10
p-20
px-20
py-10
✅ 4️⃣ 文字类（岁月静好）
text-12
text-14
text-16
font-normal
font-medium
font-bold
text-left
text-center
text-right
✅ 5️⃣ 颜色类（只用官方色）
text-black
text-white
text-gray-500
text-blue-500
bg-white
bg-gray-100
bg-blue-500
✅ 6️⃣ 边框 & 圆角（还能接受）
border
border-2
border-gray-200
border-gray-300
rounded
rounded-md
rounded-full
✅ 7️⃣ 定位类（简单就好）
relative
absolute
fixed
top-0
left-0
right-0
bottom-0
top-10
left-20
三、为什么会这样？（简单说，不废话）
1️⃣ WXSS 不是 CSS
微信小程序用的是 WXSS， 本质是 CSS 的阉割版：
不支持复杂选择器 不支持转义字符 不支持任意值
WXSS 只吃“看起来像早期 CSS”的东西
2️⃣ UnoCSS 的强项，刚好是 WXSS 的雷点
你写：
w-[100px]
UnoCSS 会生成：
.w-\[100px\] {
width: 100px;
}
在 Web 里： ✅ 合法 ✅ 优雅
在 WXSS 里： ❌ 非法 ❌ 编译失败
四、保命配置（强烈建议）
// uno.config.ts
presetUno({
arbitrary: false, // 禁止 w-[xx] 这种自杀式写法
})
“你再写中括号，我就当你没写。”
五、一句话生存法则（请背）
微信小程序 + UnoCSS：
不写中括号
不写冒号
不写花里胡哨
否则你会收获：
unexpected \
