name: unocss description: UnoCSS 即时原子化 CSS 引擎，Tailwind CSS 的超集。在配置 UnoCSS、编写工具规则、快捷方式或使用 Wind、Icons、Attributify 等预设时使用。 metadata: author: Anthony Fu version: “2026.1.28” source: 生成自 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 |
| 变体 | 将悬停、深色模式、响应式等变化应用于规则 | 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 属性中而非 class 中分组工具类 | 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 |