🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

npx @anthropic-ai/skills install antfu/skills/unocss

💡 提示：需要 Node.js 和 NPM

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

预设

主要预设

主题 描述 参考
预设 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 字体和其他 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 集成 使用 Vite 设置 UnoCSS 以及特定框架的技巧 integrations-vite
Nuxt 集成 用于 Nuxt 应用程序的 UnoCSS 模块 integrations-nuxt

📄 原始文档

完整文档（英文）：

https://skills.sh/antfu/skills/unocss

💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。