UnoCSS 可复用现有类名但需切换构建链路：卸载 Tailwind 相关依赖，安装 unocss 和 preset-wind3，Vite 中替换插件，重置样式改用 @unocss/reset/tailwind-compat.css，并清理缓存。
能直接复用现有类名，不用重写 HTML，但必须改构建配置和重置逻辑。
UnoCSS 需要替换 Tailwind 的构建链路
Tailwind 依赖 PostCSS 插件和 tailwind.config.js 扫描模板生成 CSS；UnoCSS 是 Vite 插件驱动的即时原子引擎，不走 PostCSS 流程。直接保留旧配置会导致样式不生效或重复注入。
- 删掉
postcss.config.js和@tailwindcss/postcss依赖 - 卸载
tailwindcss（除非你打算双框架共存） - 安装
unocss和兼容预设：npm add -D unocss @unocss/preset-wind3 - Vite 配置中移除
@tailwindcss/vite，改用@unocss/vite
class 名能照用，但 theme 和变体行为有细微差异
preset-wind3 实现了对 Tailwind v3 的 99% 兼容，包括 sm:、dark:、hover: 等变体，以及 theme('colors.red.500') 这类函数调用。但注意两点：
-
theme()在 UnoCSS 中仅支持字符串路径访问（如theme('colors.red.500')），不支持嵌套对象解构 - 自定义
extend中的断点或颜色需在uno.config.ts的theme字段里声明，不是tailwind.config.js那套结构 - 某些老版 Tailwind 的快捷类（如
bg-gradient-to-r）在 preset-wind3 中默认关闭，需显式启用gradient规则模块
样式重置必须重新配，不能沿用 @layer base
Tailwind 的 @tailwind base 会注入 Preflight；UnoCSS 的 preset-wind3 不自动加载它，否则会导致重置样式叠加、边框/字体等异常加倍。
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
@import "tailwindcss/base"或@layer base相关代码 - 改用 UnoCSS 官方重置：
@import "@unocss/reset/tailwind-compat.css" - 若项目用了自定义 CSS 变量覆盖（如
--tw-border-opacity），需迁移到 UnoCSS 的变量命名（如--un-border-opacity）
开发时 class 提示可能断连，得手动配插件
VSCODE 中 Tailwind CSS 插件对 UnoCSS 类名无感知，text-red-500 这类类名不会高亮或补全。
- 卸载
Tailwind CSS IntelliSense插件 - 安装
UnoCSS官方插件（VS Code Marketplace 搜索 “UnoCSS”） - 确保项目根目录有
uno.config.ts，且插件能读取到preset-wind3()配置 - 若用属性化模式（
text="red-500"），还需额外装@unocss/preset-attributify并启用
迁移最难的不是语法，而是构建链路切换后缓存残留——Vite dev server 和 node_modules/.vite 下的 CSS 文件可能卡住旧规则，务必清掉 node_modules/.vite 和 unocss/* 缓存再重启。
