unocss

UnoCSS 是一款即时原子 CSS 引擎，旨在保持灵活性和可扩展性。它的核心不预设任何立场——所有 CSS 工具类都通过预设提供。它是 Tailwind CSS 的超集，因此你可以将 Tailwind 的基础语法知识用于 UnoCSS。

重要提示： 编写 UnoCSS 代码前，Agent 应先检查项目根目录中是否有 uno.config.* 或 unocss.config.* 文件，了解可用的预设、规则和快捷方式。如果项目配置不明确，请避免使用 attributify 模式和其他高级功能——只使用基础的 class 用法。

此技能基于 UnoCSS v66.10.5，于 2026-09-25 生成。

核心

主题	描述	参考
配置	配置文件设置和所有配置选项	core-config
规则	用于生成 CSS 工具类的静态和动态规则	core-rules
快捷方式	将多个规则组合成单个简写	core-shortcuts
主题	用于颜色、断点和设计令牌的主题系统	core-theme
变体	将 hover:、dark:、响应式等变体应用于规则	core-variants
提取	UnoCSS 如何从源代码中提取工具类	core-extracting
安全列表和屏蔽列表	强制包含或排除特定工具类	core-safelist
图层和预置样式	CSS 图层顺序和原始 CSS 注入	core-layers
处理器	转换生成的 CSS 图层（包括 Lightning CSS）	core-processors

预设

主要预设

主题	描述	参考
Wind3 预设	兼容 Tailwind CSS v3 / Windi CSS 的预设（最常用）	preset-wind3
Wind4 预设	兼容 Tailwind CSS v4、支持现代 CSS 特性的预设	preset-wind4
Mini 预设	为自定义构建提供基础工具类的最小化预设	preset-mini

功能预设

主题	描述	参考
Icons 预设	使用 Iconify 和任意图标集的纯 CSS 图标	preset-icons
Attributify 预设	在 HTML 属性而非 class 中对工具类进行分组	preset-attributify
Typography 预设	提供排版默认样式的 prose 类	preset-typography
Web Fonts 预设	轻松集成 Google Fonts 和其他 Web 字体	preset-web-fonts
Tagify 预设	将工具类用作 HTML 标签名	preset-tagify
Rem to Px 预设	将工具类中的 rem 单位转换为 px	preset-rem-to-px

转换器

主题	描述	参考
变体组	将具有相同前缀的工具类分组的简写方式	transformer-variant-group
指令	CSS 指令：@apply、@screen、theme()、icon()	transformer-directives
编译类	将多个类编译为一个哈希类	transformer-compile-class
Attributify JSX	在 JSX/TSX 中支持无值的 attributify	transformer-attributify-jsx

集成

主题	描述	参考
Vite 集成	配置 UnoCSS 与 Vite 集成，以及针对特定框架的提示	integrations-vite
Nuxt 集成	用于 Nuxt 应用的 UnoCSS 模块	integrations-nuxt