名称: unocss 描述: UnoCSS即时原子CSS引擎，Tailwind CSS的超集。在配置UnoCSS、编写工具规则、快捷方式，或使用像Wind、Icons、Attributify等预设时使用。 元数据: 作者: Anthony Fu 版本: “2026.1.28” 来源: 从https://github.com/unocss/unocss生成，脚本位于https://github.com/antfu/skills
UnoCSS是一个即时原子CSS引擎，设计为灵活且可扩展。核心是无主见的 - 所有CSS工具通过预设提供。它是Tailwind CSS的超集，因此您可以重用您的Tailwind知识用于基本语法使用。
重要： 在编写UnoCSS代码之前，代理应检查项目根目录中的uno.config.*或unocss.config.*文件，以了解可用的预设、规则和快捷方式。如果项目设置不明确，避免使用attributify模式和其他高级功能 - 坚持基本的class使用。
该技能基于UnoCSS 66.x，生成于2026-01-28。
核心
| 主题 | 描述 | 参考 |
|---|---|---|
| 配置 | 配置文件设置和所有配置选项 | core-config |
| 规则 | 用于生成CSS工具的静态和动态规则 | core-rules |
| 快捷方式 | 将多个规则组合成单个简写 | core-shortcuts |
| 主题 | 颜色、断点和设计令牌的主题系统 | core-theme |
| 变体 | 应用像hover:、dark:、responsive等变体到规则 | core-variants |
| 提取 | UnoCSS如何从源代码提取工具 | core-extracting |
| 安全列表和阻止列表 | 强制包含或排除特定工具 | core-safelist |
| 层和预飞行 | CSS层排序和原始CSS注入 | core-layers |
预设
主要预设
| 主题 | 描述 | 参考 |
|---|---|---|
| 预设 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属性中而不是类中分组工具 | preset-attributify |
| 预设 Typography | 用于排版默认的散文类 | preset-typography |
| 预设 Web Fonts | 易于Google字体和其他网页字体集成 | 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集成 | 使用Vite设置UnoCSS和框架特定提示 | integrations-vite |
| Nuxt集成 | Nuxt应用程序的UnoCSS模块 | integrations-nuxt |