SuperAPI AI 工具集

unocss

前端与建站

查看项目

更新于 10-15 18:31

技能介绍

UnoCSS 是一个即时原子化 CSS 引擎,设计目标是灵活与可扩展。它的核心保持不预设观点,所有 CSS 工具类均由预设(presets)提供。UnoCSS 是 Tailwind CSS 的超集,因此可以复用已有的 Tailwind 知识来使用基础语法。

使用方式与注意事项:在编写 UnoCSS 代码之前,代理应检查项目根目录下的 uno.config.* 或 unocss.config.* 文件,以了解当前可用的预设、规则和快捷方式。如果项目配置不明确,应避免使用 attributify 模式及其他高级特性,坚持使用基础的 class 用法。该技能基于 UnoCSS 66.x,生成于 2026-01-28。

核心能力:

  • 配置(Configuration):配置文件设置及全部配置选项。
  • 规则(Rules):用于生成 CSS 工具类的静态与动态规则。
  • 快捷方式(Shortcuts):将多条规则组合为单个简写。
  • 主题(Theme):面向颜色、断点和设计令牌的主题系统。
  • 变体(Variants):为规则应用 hover:、dark:、响应式等变化。
  • 提取(Extracting):UnoCSS 如何从源代码中提取工具类。
  • 安全列表与阻止列表(Safelist & Blocklist):强制包含或排除特定工具类。
  • 层与预检(Layers & Preflights):CSS 层排序与原始 CSS 注入。

预设(Presets): 主要预设:

  • Preset Wind3:兼容 Tailwind CSS v3 / Windi CSS 的预设(最常用)。
  • Preset Wind4:兼容 Tailwind CSS v4 的预设,支持现代 CSS 特性。
  • Preset Mini:面向自定义构建的最小预设,提供必要工具类。

功能预设:

  • Preset Icons:使用 Iconify 的纯 CSS 图标,支持任意图标集。
  • Preset Attributify:将工具类分组到 HTML 属性中,而非 class。
  • Preset Typography:提供用于排版默认值的 prose 类。
  • Preset Web Fonts:便捷集成 Google Fonts 及其他网页字体。
  • Preset Tagify:将工具类用作 HTML 标签名。
  • Preset Rem to Px:将工具类的 rem 单位转换为 px。

转换器(Transformers):

  • Variant Group:为具有公共前缀的工具类提供分组简写。
  • Directives:CSS 指令,包括 @apply、@screen、theme()、icon()。
  • Compile Class:将多个 class 编译为一个哈希 class。
  • Attributify JSX:在 JSX/TSX 中支持无值 attributify。

集成(Integrations):

  • Vite 集成:在 Vite 中设置 UnoCSS 及框架相关提示。
  • Nuxt 集成:用于 Nuxt 应用的 UnoCSS 模块。

适用场景:需要在项目中配置 UnoCSS、编写工具类规则、定义快捷方式,或使用 Wind、Icons、Attributify、Typography 等预设时。

限制:资料未提供具体的收费、价格、平台支持范围或效果数据;使用高级特性前需确认项目配置,配置不明确时应仅使用基础 class 用法。