一、前言

在 Vue3 项目里，每次写样式都要：新建 class，切到 css，写完再切回来，久而久之，手已经不想动了。这时候你就会开始怀念一句话：

“如果 Tailwind 能用在 uni-app 就好了。”
于是你发现了 UnoCSS。
然后——
开始踩坑了。

二、实现完整代码

pnpm add unocss@0.55.7 -D

1.创建 uno.config.ts文件，放在 项目根目录（不是 src）。

import {
  defineConfig,
  presetUno,
  presetAttributify,
  presetIcons,
} from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
  ],
})

2.配置 vite.config.ts

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    uni(),
    UnoCSS(),
  ],
})

3.main.ts文件引入unocss

import "uno.css";

三、为什么选择 UnoCSS？

unocss、Tailwind、preset-weapp这么多版本为什么选择UnoCSS,因为我在uView Plus文档里面看到 uView Plus默认把单位统一成 px 了，所以的选择是UnoCSS，
一句话版本：

Tailwind 太重，preset-weapp 不合适，UnoCSS 刚刚好。

Tailwind 的问题

• 体积大
• 配置复杂
• 在 uni-app 里体验一般
• H5 能用，小程序各种限制
  结论：
  不是不能用，是不想折腾。

unocss-preset-weapp 的问题
很多博客会推荐：

pnpm add unocss unocss-preset-weapp -D

但如果你用的是 uView Plus，这里要打一个 ❌。

原因很关键：
uView Plus 已经把单位默认单位设置是px
而 unocss-preset-weapp 的核心目标是：

• 适配微信小程序
• 默认 rpx
• 做样式转换

结果就是：
preset-weapp 想帮你转单位
uView Plus 已经帮你转过了
两边一碰头 —— 单位体系直接打架
所以在 uView Plus 项目中：不推荐使用 unocss-preset-weapp

正确选型结论

技术栈	推荐方案
uView Plus + UniApp + H5	✅ UnoCSS
纯微信小程序	✅ UnoCSS + preset-weapp
Tailwind 原教旨	❌ 不推荐

微信小程序对UnoCSS支持不是很友好，具体使用范围请参考：
微信小程序中的 UnoCSS：哪些能用，哪些一用就报错？

四、选择 UnoCSS版本（稳定版）

这里不要追最新版本，uni-app + Vite 对新版本支持并不总是同步。

推荐版本：

pnpm add unocss@0.55.7 -D

这个版本在：

• uni-app
• Vite
• Vue3
• H5

组合下是最稳的。