配置或使用 UnoCSS 原子化 CSS 时：先查项目配置…

在项目中配置 UnoCSS、编写 utility 规则或 shortcuts、使用 presets/transformers 时，先确认可用配置，再按对应主题实现。

适用场景

解决思路

1. 在编写 UnoCSS 代码前，检查项目根目录下是否存在 `uno.config.*` 或 `unocss.config.*`，以了解可用的 presets、rules 和 shortcuts。
2. 如果项目设置不明确，避免使用 attributify 模式和其他高级特性，坚持使用基础 `class` 用法。
3. 可用 Tailwind CSS 基础知识复用 UnoCSS 的基础语法（UnoCSS 是 Tailwind CSS 的超集）。
4. 配置 UnoCSS：设置配置文件并调整所需配置选项；细节参考 `references/core-config.md`。
5. 定义 Rules：创建静态和动态规则来生成 CSS utilities；细节参考 `references/core-rules.md`。
6. 定义 Shortcuts：把多个规则组合成单个简写；细节参考 `references/core-shortcuts.md`。
7. 配置 Theme：设置颜色、断点和设计 tokens 的主题系统；细节参考 `references/core-theme.md`。
8. 使用 Variants：对规则应用 `hover:`、`dark:`、响应式等变体；细节参考 `references/core-variants.md`。
9. 配置 Extracting：让 UnoCSS 从源代码中提取 utilities；细节参考 `references/core-extracting.md`。
10. 使用 Safelist 和 Blocklist：强制包含或排除特定 utilities；细节参考 `references/core-safelist.md`。
11. 配置 Layers 和 Preflights：控制 CSS layer 顺序并注入原始 CSS；细节参考 `references/core-layers.md`。
12. 使用 Preset Wind3：采用 Tailwind CSS v3 / Windi CSS 兼容 preset（最常用）；细节参考 `references/preset-wind3.md`。
13. 使用 Preset Wind4：采用兼容 Tailwind CSS v4 且包含现代 CSS 特性的 preset；细节参考 `references/preset-wind4.md`。
14. 使用 Preset Mini：采用面向自定义构建的最小 preset，提供必要 utilities；细节参考 `references/preset-mini.md`。
15. 使用 Preset Icons：通过 Iconify 和任意图标集使用纯 CSS 图标；细节参考 `references/preset-icons.md`。
16. 使用 Preset Attributify：用 HTML attributes 分组 utilities，而不是 `class`；细节参考 `references/preset-attributify.md`。
17. 使用 Preset Typography：用 `prose` classes 设置排版默认样式；细节参考 `references/preset-typography.md`。
18. 使用 Preset Web Fonts：集成 Google Fonts 和其他 web fonts；细节参考 `references/preset-web-fonts.md`。
19. 使用 Preset Tagify：把 utilities 作为 HTML 标签名使用；细节参考 `references/preset-tagify.md`。
20. 使用 Preset Rem to Px：把 utilities 的 rem 单位转换为 px；细节参考 `references/preset-rem-to-px.md`。
21. 使用 Transformer Variant Group：为带公共前缀的 utilities 使用分组简写；细节参考 `references/transformer-variant-group.md`。
22. 使用 Transformer Directives：在 CSS 中使用 `@apply`、`@screen`、`theme()`、`icon()` 等 directives；细节参考 `references/transformer-directives.md`。
23. 使用 Transformer Compile Class：把多个 classes 编译成一个 hashed class；细节参考 `references/transformer-compile-class.md`。
24. 使用 Transformer Attributify JSX：在 JSX/TSX 中支持无值 attributify；细节参考 `references/transformer-attributify-jsx.md`。
25. 集成 Vite：在 Vite 中设置 UnoCSS，并加入框架特定提示；细节参考 `references/integrations-vite.md`。
26. 集成 Nuxt：在 Nuxt 应用中使用 UnoCSS module；细节参考 `references/integrations-nuxt.md`。

适用边界 · 注意事项

• 项目未引入或未配置 UnoCSS，且不能添加该依赖时。
• 项目设置不明确且无法先确认 presets/rules/shortcuts 时，避免依赖 attributify 等高级特性。
• 只需要少量手写 CSS 且不想引入原子化 CSS 引擎时。