UnoCSS按需生成原子类，仅构建时扫描源码中字面量类名；需正确配置content路径、preset及插件顺序以确保功能正常。
UnoCSS 的原子类不是写出来的，是按需生成的
UnoCSS 本身不预设任何 CSS 类，它在构建时扫描源码中出现的类名（比如 text-red-500、flex-col），只生成这些真实用到的原子规则。这意味着你写什么，它才吐什么 —— 没有“全量 Tailwind 那种 10MB 的 CSS”问题。
关键在于：扫描必须发生在构建阶段（Vite / Webpack / Astro 等），且源码里得是**字面量字符串**，不能是拼接或动态计算的类名。
- ✅ 正确：
class="text-blue-600 p-4 rounded-lg" - ❌ 不会被识别：
:class="`text-${color}-500`"或className={`p-${size}`} - ⚠️ JSX/TSX 中带插值的模板字符串，UnoCSS 默认不解析；需配
attributifyPreset或手动加/* uno */注释标记
配置 preset 是控制原子能力边界的开关
UnoCSS 默认只启用最基础的 unocss/preset-uno（类似 Tailwind 的核心工具集），但像 grid-cols-[2fr,1fr] 这种任意值语法、图标支持、动画帧等，得显式开启对应 preset。
常见组合：
立即学习“前端免费学习笔记（深入）”；
- 响应式 + 暗黑模式：
unocss/preset-mini（轻量但够用） - 完整 Tailwind 兼容：
unocss/preset-tailwind（注意：仍按需，不是全量） - 图标支持：
unocss/preset-icons，配合icon="mdi:home"属性使用 - 需要
bg-[#1da1f2]这类任意颜色？确保theme.extend.colors或shortcuts已声明，否则会被忽略
Vite 插件里 content 配置漏掉文件 = 类名失效
UnoCSS 不会自动读你整个项目，它只扫描你在 content 里声明的路径。漏了某个目录，里面写的类就完全不会进最终 CSS。
典型错误配置：
content: {
files: ['src/**/*.{html,js,ts,vue,svelte,jsx,tsx}']
}- ❌ 没包含
.md（VitePress）、.astro、.njk等模板文件 → Markdown 里的类不生效 - ❌ 用了
node_modules但没排除，导致扫描巨慢甚至 OOM - ✅ 推荐写法：
files: ['src/**/*.{html,ts,tsx,vue,astro,md}']，并加ignore: ['node_modules']
开发时热更新不准？大概率是 HMR 缓存或插件顺序问题
UnoCSS 的 HMR（热更新）依赖 Vite 的模块图和插件执行时机。如果改了类名但样式没变，不是 bug，通常是以下两个原因：
- ❌ UnoCSS 插件注册在 Vite 的
cssPreprocess之后 → 类名被其他插件提前处理掉了 - ❌ 使用了
vite-plugin-md或@astrojs/markdown-content，但没配markdown解析器支持（需开启markdown: true选项） - ✅ 快速验证：删掉
node_modules/.vite和dist，重启 dev server
复杂点在于：某些框架（如 SvelteKit）对 CSS 注入顺序更敏感，unocss 插件必须放在 sveltekit 插件之前，否则 HMR 失效。
