unocss

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

重要提示： 在编写 UnoCSS 代码之前，Agent 应先检查项目根目录中是否存在 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 和其他 Web 字体	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 集成	配置 UnoCSS 与 Vite，并提供框架特定的建议	integrations-vite
Nuxt 集成	用于 Nuxt 应用的 UnoCSS 模块	integrations-nuxt