unocss变慢的根本原因是默认扫描整个项目目录（含node_modules），导致大量无效解析；必须通过content.include显式声明源码路径或content.exclude排除node_modules，否则热更新严重延迟。
为什么 UnoCSS 在 Vite 里反而变慢了
常见错误现象：npm run dev 启动后热更新卡顿，改一行 class 要等 5 秒以上。
根本原因：UnoCSS 默认会扫描整个项目目录，node_modules 里的 JS/TS 文件全被拉进来匹配。哪怕只是注释里写了 class="text-lg"，它也照扫不误。
实操建议：
-
content.exclude不是可选项，是必填项；写成/node_modules\//或'node_modules'，别写成./node_modules - 更推荐用
content.include显式声明源码路径，比如：['src/**/*.{vue,ts,html}'] - 若项目含
packages/多包结构，必须逐个列出：['packages/*/src/**/*.{vue,ts}']，否则漏扫或误扫 - Vite 插件已默认启用
transform钩子，但如果你手动调用unocss.transform()，务必传入和content完全一致的配置，否则开发与构建行为不一致
预设（presets）不是开箱即用，而是按需组合
UnoCSS 本身不带任何工具类，presetUno()、presetMini()、presetAttributify() 全是插件式加载。
使用场景：你不需要 Tailwind 全量色板？那就别加 presetUno()；只想用基础间距+文字+颜色？presetMini() 就够了；要写 border="rounded-2 p-3" 这种属性化语法？必须显式引入 presetAttributify()。
参数差异：
-
presetUno()提供最全的 Tailwind 兼容规则，体积最大，适合已有 Tailwind 项目迁移 -
presetMini()仅覆盖常用原子能力（px-4、text-center、bg-red-500），打包后 CSS 增长最小 -
presetIcons()需配合transformerDirectives()才能识别icon:ph-house这类写法
动态 class 拼接会让 UnoCSS “失明”
常见错误现象：写了 :class="`text-${color}-500`"，但生成的 CSS 里没有 .text-blue-500。
原因：UnoCSS 只做静态字符串提取，不执行 JS，无法推断 color 的运行时值。
实操建议：
- 绝对避免在模板中用
className.split(' ').join(' ')或v-bind:class动态拼接原子类名 - 若必须动态，提前写进
safelist：['text-blue-500', 'text-red-500', 'bg-gray-100'] - 更推荐用
shortcuts封装语义化组合：['btn-primary', 'px-4 py-2 bg-blue-600 text-white']，既免拼接又可控 - 静态
rules可绕过匹配逻辑，但只适用于 100% 确定不会变化的类名，比如组件库的固定主题类
HTML 文件没生效？先确认它是否被扫描到
UnoCSS 不解析 HTML，只从文件内容里提取 class="..." 字符串。纯静态 index.html 若没进构建流程，就等于没存在。
关键检查点：
- Vite 用户：确保
index.html在src/下，而非public/；public/下的文件不会被插件处理 - CLI 用户：必须显式指定路径，
npx unocss --files "src/**/*.html"，不能依赖默认 glob - 检查浏览器 DevTools 中是否存在
<style id="unocss"></style>标签，且内容包含你写的类名对应规则 - 若用 PHP 或服务端模板，确保构建阶段能访问最终渲染出的 HTML 字符串，否则只能靠
safelist预埋
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
