uni-app 中应使用 unocss 而非 tailwindcss，因其构建时静态提取原子类、无运行时开销、天然适配小程序；需通过 unplugin-unocss/vite 配置，禁用 dynamic 模式、启用 preflights，并确保 content 路径覆盖所有文件。
uni-app 项目里不能直接用 npm install tailwindcss
因为 uni-app 的编译目标是多端（微信小程序、H5、App），而 TailwindCSS 默认生成的是浏览器端 CSS，依赖 @apply、@layer 等 PostCSS 特性，且其 class 名生成逻辑与小程序的样式隔离机制冲突——小程序不支持动态 class 名运行时注入，也不支持全局 CSS 作用域穿透。直接配 Tailwind 会导致 H5 正常但小程序样式丢失、热更新失效、构建报错 Cannot find module 'tailwindcss' 或 postcss plugin tailwindcss is not found。
- 真正能落地的是 Unocss，它在构建时静态提取原子类，不依赖运行时，天然适配小程序
- Unocss 的
uno.css是纯 CSS 文件，可直接通过<style src="@unocss/reset"></style>引入，无运行时开销 - 不要试图在
vue.config.js或vue.config.ts里配 Tailwind 插件——uni-app 的 webpack 配置被封装过，改了也无效
用 unplugin-unocss/vite 配 Vite 模式 uni-app（HBuilderX 3.9+ / cli 创建）
uni-app 官方 CLI（@dcloudio/uni-cli）已默认使用 Vite 构建（HBuilderX 3.9+ 同步升级），所以必须走 Vite 插件链。Unocss 提供了专为 Vite 设计的 unplugin-unocss/vite，比 Webpack 版本更稳定、热更新更快。
- 安装：
npm install -D unplugin-unocss @unocss/preset-uno @unocss/reset - 在
vite.config.ts中添加插件（注意顺序：必须在uni插件之前）：
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import Unocss from 'unplugin-unocss/vite'
<p>export default defineConfig({
plugins: [
Unocss({ /<em> 配置见下条 </em>/ }),
uni(),
],
})</p>
- 必须启用
preflights（否则reset不生效），并在main.ts或根组件中 import：import '@unocss/reset' - 不推荐开启
attributifypreset（如bg="blue-500 hover:blue-600"），小程序模板里属性值带等号和引号易被解析异常
uno.config.ts 关键配置项：适配小程序的 class 白名单与预设
小程序不允许任意 class 名（比如含 :、/、空格的 class 会被忽略），所以 Unocss 必须限制输出范围，并关闭危险特性。
- 禁用
dynamic模式：dynamic: false（否则text-${color}这类写法会生成非法 class） - 只启用安全预设：
presets: [presetUno({ dark: 'class' })]，不用presetWind（含太多伪类和响应式断点，小程序不支持@media和:hover） - 显式声明小程序支持的尺寸单位：
theme: { fontSize: { xs: '12px', sm: '14px', base: '16px' } }，避免用text-sm时 fallback 到 rem 导致错乱 - 若需自定义颜色，用
theme: { colors: { primary: '#007aff' } }，然后写text-primary，别用text-[#007aff]（后者属于 dynamic，小程序无法识别）
小程序里 class 生效但没样式？检查这三处
常见现象：写了 class="text-red-500 p-4"，控制台能看到 class 被渲染，但没效果。本质是 class 名生成了，但对应 CSS 没打进最终包里。
- 确认
uno.config.ts中content字段包含所有用到原子类的文件路径，例如：content: ['src/**/*.{vue,ts,js}']；漏掉.nvue文件会导致 App 端失效 - 检查是否在
pages.json的页面配置里加了"style": { "navigationBarTitleText": "xxx" }—— 这会触发 uni-app 的「样式隔离」，导致全局uno.css无法作用于该页面，需手动在页面<style></style>块中@import "@/unocss.css"（构建后路径以实际为准） - 开发时删了某个 class 但样式还在？清缓存：
rm -rf node_modules/.unocss+ 重启 dev server；Unocss 有缓存机制，改配置不重启不会刷新 CSS 输出
最麻烦的其实是 scoped 样式和原子类混用——一旦组件用了 <style scoped></style>，Unocss 生成的 class 就算存在也不会被应用，因为 scoped 会加属性选择器。这种场景下，要么全用原子类（去掉 scoped），要么只在非 scoped 区域用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
