uView Plus + Vue3 + TypeScript + UniApp 正确引入 UnoCSS（避坑版）

念你那丝微笑2026-01-10 9:14

一、前言

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

"如果 Tailwind 能用在 uni-app 就好了。"

于是你发现了 UnoCSS。

然后------

开始踩坑了。

二、实现完整代码

javascript 复制代码

pnpm add unocss@0.55.7 -D

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

javascript 复制代码

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

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

2.配置 vite.config.ts

javascript 复制代码

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

javascript 复制代码

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 的问题

很多博客会推荐：

javascript 复制代码

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版本（稳定版）

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

推荐版本：

javascript 复制代码

pnpm add unocss@0.55.7 -D

这个版本在：

uni-app
Vite
Vue3
H5

组合下是最稳的。