应使用 unocss 而非 tailwindcss，因其构建时静态提取原子类、无运行时开销、天然适配小程序；需通过 unplugin-unocss/vite 配置，插件必须在 uni 插件之前注册，content 路径覆盖所有文件，禁用 attributify 和 dynamic 模式，启用 preflights 并使用 preset-wind3 预设以兼容小程序 class 白名单限制。
能直接复用现有类名，但必须改构建配置和禁用动态特性。Tailwind CSS 和 UnoCSS 不是插件替换关系，而是两套独立的原子化引擎——迁移不是“换包”，而是切换提取逻辑、关闭 Tailwind 特有运行时依赖，并适配小程序或多端限制。
UnoCSS 插件必须在 uni 插件之前注册
uni-app 的 Vite 构建链中，@dcloudio/vite-plugin-uni 会劫持模板解析流程。如果 unplugin-unocss/vite 插件注册在它之后，UnoCSS 就无法扫描 .vue 文件里的 class 字符串，导致样式不生成。
- 正确顺序：
Unocss()→uni() - 错误写法（样式丢失）：
uni()→Unocss() - uni-app CLI 3.9+ / HBuilderX 3.9+ 默认走 Vite，
vite.config.ts是唯一有效入口
content 路径必须覆盖所有 .vue 和 .ts 文件
UnoCSS 默认只扫描 src/**/*.{html,js,ts,jsx,tsx,vue}，但 uni-app 项目里常把页面放在 pages/、组件在 components/、逻辑在 stores/，这些路径若没显式声明，class 就不会被提取。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 推荐写法：
content: ['src/**/*.{vue,ts,js}', 'pages/**/*.vue', 'components/**/*.vue'] - 漏掉
pages/→ 小程序首页样式全丢 - 漏掉
stores/→ 若里面写了class: 'text-red-500'这类字符串，也不会提取
必须关闭 attributify 模式并禁用 dynamic
uni-app 小程序模板引擎对属性值解析极弱：bg="blue-500" 中的等号和引号会被截断或忽略，最终 class 名变成 bg 或空字符串，样式完全失效。
- 删掉
@unocss/preset-attributify，不用bg="blue-500"写法 - 在
uno.config.ts中明确设attributify: false -
dynamic: false（默认就是 false，但建议显式写出以防未来升级变更） - 保留
preflights: true，否则@unocss/reset不生效，基础 margin/padding 会错乱
小程序 class 白名单机制不能绕过
微信/支付宝小程序只允许 class 名含字母、数字、连字符（-），禁止冒号 :、斜杠 /、点 . 等字符。Tailwind 的 hover:bg-blue-500、md:text-lg 在小程序里直接被过滤，而 UnoCSS 的 preset-wind3 默认支持这些变体，但需手动启用安全输出。
- 用
@unocss/preset-wind3替代@unocss/preset-uno，它专为 Tailwind v3 兼容设计且内置白名单过滤 - 确保
uno.config.ts中presets包含presetWind3()，而非仅presetUno() - 避免手写
dark:bg-gray-800类——小程序不识别dark:前缀，应改用 class 切换逻辑
真正卡住迁移的往往不是语法兼容，而是构建链顺序、路径遗漏和小程序 class 解析限制这三点。只要插件位置对、content 覆盖全、attributify 关闭、wind3 预设启用，90% 的 Tailwind 类名都能原样跑通。剩下那 10%，得靠条件 class 或 scoped style 补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
