UnoCSS不能直接替代Tailwind CSS，必须彻底卸载Tailwind相关依赖、删除其配置文件（tailwind.config.js、postcss.config.js）、移除Vite中Tailwind插件引用，并启用preset-wind3预设；theme()仅支持字符串路径访问，自定义配置需写入uno.config.ts，重置样式须改用@unocss/reset/tailwind-compat.css，且务必清理VS Code插件与node_modules/.vite等缓存。
能直接替代，但必须砍掉 Tailwind 的构建链路，否则两个引擎会打架，样式不生效或重复注入。
卸载 Tailwind 相关依赖和配置
UnoCSS 不走 PostCSS 流程，保留 postcss.config.js 或 @tailwindcss/postcss 会导致构建卡住或 class 提示失效。
- 运行
npm uninstall -D tailwindcss @tailwindcss/postcss @tailwindcss/vite - 删掉
tailwind.config.js（除非你打算双框架共存） - 删掉
postcss.config.js（UnoCSS 不需要它） - 检查
vite.config.ts，移除所有@tailwindcss/vite插件引用
安装 UnoCSS 并启用 preset-wind3
要用原有类名（如 text-red-500、sm:flex），就得用 @unocss/preset-wind3 —— 它是专为 Tailwind v3 兼容设计的预设，覆盖 99% 常用语法，但不是 100%。
- 安装：
npm add -D unocss @unocss/preset-wind3 - 在
vite.config.ts中替换插件：UnoCSS({ presets: [presetWind3()] }) -
theme('colors.red.500')可用，但只支持字符串路径，不能写theme().colors.red[500] - 自定义断点或颜色必须写进
uno.config.ts的theme字段，不是复用tailwind.config.js
重置样式不能沿用 Tailwind 的 Preflight
@tailwind base 注入的 Preflight 与 @unocss/reset/tailwind-compat.css 规则不一致，混用会导致 border、font-size 等加倍生效。
- 删掉所有
@import "tailwindcss/base"或@layer base相关代码 - 在全局 CSS 入口（如
main.css或App.vue的）中改用：@import "@unocss/reset/tailwind-compat.css" - 若项目用了
--tw-border-opacity这类变量，需手动替换成--un-border-opacity
VSCODE 插件和缓存必须重置
旧插件对 UnoCSS 类名无感知，缓存残留会让 dev server 一直用旧规则生成 CSS，哪怕你改了配置也看不到效果。
- 卸载 VS Code 的
Tailwind CSS IntelliSense插件 - 安装官方
UnoCSS插件（Marketplace 搜索即可） - 确保项目根目录有
uno.config.ts，且其中包含presetWind3() - 清空缓存：
rm -rf node_modules/.vite unocss/*，再重启 dev server
最常被跳过的其实是缓存清理和重置 CSS 文件这两步——改完配置却没生效，八成卡在这儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
