SKILL.md
readonly只读
name
unocss
description
UnoCSS 即时原子化 CSS 引擎，Tailwind CSS 的超集。用于配置 UnoCSS、编写工具类规则、快捷方式，或使用 Wind、Icons、Attributify 等预设。
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:、响应式等变体 | core-variants |
| 提取 | UnoCSS 如何从源代码中提取工具类 | core-extracting |
| 安全列表与阻止列表 | 强制包含或排除特定工具类 | core-safelist |
| 层与预置 | CSS 层排序和原始 CSS 注入 | core-layers |
预设
主要预设
| 主题 | 描述 | 参考 |
|---|---|---|
| Preset Wind3 | 兼容 Tailwind CSS v3 / Windi CSS 的预设（最常用） | preset-wind3 |
| Preset Wind4 | 兼容 Tailwind CSS v4 的预设，支持现代 CSS 特性 | preset-wind4 |
| Preset Mini | 最小预设，包含自定义构建所需的基本工具类 | preset-mini |
功能预设
| 主题 | 描述 | 参考 |
|---|---|---|
| Preset Icons | 使用 Iconify 的纯 CSS 图标，支持任何图标集 | preset-icons |
| Preset Attributify | 将工具类分组到 HTML 属性中，而非 class | preset-attributify |
| Preset Typography | 用于排版默认值的 Prose 类 | preset-typography |
| Preset Web Fonts | 轻松集成 Google Fonts 和其他网络字体 | preset-web-fonts |
| Preset Tagify | 将工具类用作 HTML 标签名 | preset-tagify |
| Preset 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 |
