迁移 unocss 时须卸载 windi css 全部依赖，启用 preset-wind 及对应 transformer（attributify、variant-group 等），并正确配置 content.filesystem 路径，否则将导致样式丢失或构建失败。
能直接复用大部分 Windi CSS 代码，但必须删掉 vite-plugin-windicss 和 windicss 依赖，否则会和 UnoCSS 的原子化引擎冲突 —— 这是迁移失败最常见的原因。
卸载 Windi CSS 相关包并清理残留
UnoCSS 和 Windi CSS 不能共存，它们都接管了源码中类名的解析与 CSS 生成流程。一旦同时启用，会出现样式丢失、重复注入或构建报错（比如 Cannot find module 'windicss' 或 duplicate utility definition）。
- 执行
pnpm remove vite-plugin-windicss windicss（或对应yarn remove/npm uninstall） - 删除
main.ts/main.js中的import 'virtual:windi.css'和import 'virtual:windi-devtools' - 移除
vite.config.ts里所有WindiCSS()插件注册 - 检查
package.json，确认没有遗留tailwindcss、postcss、autoprefixer（除非你项目其他地方明确需要它们）
安装 UnoCSS 并配置基础 preset
UnoCSS 默认不带任何工具类，必须显式启用 @unocss/preset-wind 才能兼容 Windi CSS 的类名写法（如 flex、text-lg、hover:bg-blue-500）。不加这个 preset，所有旧类名都会被忽略。
- 运行
pnpm add -D unocss @unocss/preset-wind - 创建
uno.config.ts，至少包含：import { defineConfig } from 'unocss'<br>import presetWind from '@unocss/preset-wind'<br><br>export default defineConfig({<br> presets: [presetWind()],<br> content: {<br> filesystem: ['./src/**/*.{vue,html,jsx,tsx}'],<br> },<br>}) - 注意：不要复制
windi.config.js的内容到uno.config.ts—— UnoCSS 的theme配置方式不同，直接粘贴会导致theme.extend.colors不生效
处理 Windi CSS 特有语法：attributify 和 shortcuts
Windi CSS 的 attributify（如 bg="blue-500" p="4" rounded）和 shortcuts（如 btn="px-4 py-2 rounded font-medium"）在 UnoCSS 中默认不启用，需手动开启对应 transformer 和 preset。
- 安装 transformer：
pnpm add -D @unocss/transformer-attributify @unocss/transformer-directives - 在
uno.config.ts中加入：import transformerAttributify from '@unocss/transformer-attributify'<br>import transformerDirectives from '@unocss/transformer-directives'<br><br>export default defineConfig({<br> // ...<br> transformers: [<br> transformerAttributify(),<br> transformerDirectives(),<br> ],<br>}) -
shortcuts需通过shortcuts选项定义，不是靠插件自动识别；例如：shortcuts: [<br> ['btn', 'px-4 py-2 rounded font-medium bg-blue-500 text-white hover:bg-blue-600'],<br>]
变体分组语法 hover:(bg-gray-400 font-medium) 怎么办
Windi CSS 原生支持的括号分组语法，在 UnoCSS 中需额外启用 @unocss/transformer-variant-group —— 它不会随 @unocss/preset-wind 自动加载。
- 安装：
pnpm add -D @unocss/transformer-variant-group - 导入并注册：
import transformerVariantGroup from '@unocss/transformer-variant-group'<br><br>export default defineConfig({<br> // ...<br> transformers: [<br> // ...<br> transformerVariantGroup(),<br> ],<br>}) - 注意：该 transformer 只处理源码字符串中的括号语法，不修改 JS 表达式里的动态拼接（如
class="hover:(${active ? 'bg-red' : 'bg-blue'})-500"），这类仍需改写为完整类名条件判断
最易被忽略的是 content.filesystem 路径配置 —— 如果没覆盖到你的 Vue 组件或 JSX 文件，UnoCSS 就不会扫描其中的类名，结果就是页面完全无样式。务必确认 glob 模式匹配真实路径，且大小写一致（尤其在 Windows 下）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
