CSS 框架选型直接影响开发效率和产物性能。本文对比 Tailwind CSS、UnoCSS、Windi CSS 等主流方案，重点讲解 UnoCSS 的安装配置、预设系统和样式重置集成。
| 框架 | 特点 | 构建速度 | 适用场景 |
|---|---|---|---|
| Tailwind CSS | 生态最完善、文档丰富 | 较慢 | 大型团队项目 |
| UnoCSS | 即时引擎、高度可定制 | 极快 | 性能敏感项目 |
| Windi CSS | Tailwind 兼容、更快 | 快 | 旧项目迁移（已停止维护） |
| Bootstrap | 组件化、预设样式 | - | 后台管理系统 |
preset-wind 兼容 Tailwind 语法pnpm add -D unocss
pnpm add -D @unocss/reset # 样式重置（可选）// vite.config.ts
import UnoCSS from 'unocss/vite'
export default defineConfig({
plugins: [
vue(),
UnoCSS(),
],
})// uno.config.ts
import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'
export default defineConfig({
presets: [
presetUno(), // 默认预设（类 Tailwind）
presetAttributify(), // 属性化模式
presetIcons(), // 图标支持
],
shortcuts: {
'btn': 'px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600',
'card': 'p-4 bg-white rounded shadow',
},
theme: {
colors: {
primary: '#3498db',
}
}
})// main.ts
import 'virtual:uno.css'
import '@unocss/reset/tailwind.css'<template>
<div class="p-4 text-center">
<h1 class="text-2xl font-bold text-primary">Hello</h1>
<button class="btn mt-4">Click</button>
</div>
</template><template>
<div p-4 text-center>
<h1 text-2xl font-bold>Hello</h1>
<button class="btn" mt-4>Click</button>
</div>
</template>Q: UnoCSS 和 Tailwind CSS 的类名兼容吗？
使用 presetWind() 预设后，UnoCSS 兼容绝大部分 Tailwind CSS 类名。现有 Tailwind 项目可以较低成本迁移到 UnoCSS。
Q: UnoCSS 如何处理未使用的样式？
UnoCSS 是即时生成引擎，只生成代码中实际使用的类名对应 CSS。不存在"未使用样式"问题，天然实现 Tree-shaking。