unocss

Name: unocss
Author: onmax

github.com/onmax设计与 UI723196 次安装3 天前更新

代码仓库

关于 unocss

UnoCSS 是一款灵活、可扩展的原子化 CSS 引擎，通过预设提供 CSS 工具类。此技能汇总其配置、规则、预设、转换器及 Vite 和 Nuxt 集成资料。

主要功能

01基于预设生成 CSS 工具类
02静态与动态规则及快捷方式
03主题、变体与样式提取配置
04图标、排版及字体预设
05变体分组与指令转换器

适用场景

01配置项目的 UnoCSS 规则和主题
02选择与 Tailwind 语法兼容的预设
03在 JSX 或 TSX 中使用属性转换器

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/onmax/nuxt-skills --skill unocss

安装后在 Claude Code 中输入/unocss确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

core-config.md

core-extracting.md

core-layers.md

core-processors.md

core-rules.md

core-safelist.md

core-shortcuts.md

core-theme.md

core-variants.md

integrations-nuxt.md

integrations-vite.md

preset-attributify.md

preset-icons.md

preset-mini.md

preset-rem-to-px.md

preset-tagify.md

preset-typography.md

preset-web-fonts.md

preset-wind3.md

preset-wind4.md

transformer-attributify-jsx.md

transformer-compile-class.md

transformer-directives.md

transformer-variant-group.md

详细介绍

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

重要： 编写 UnoCSS 代码前，Agent 应检查项目根目录中是否存在 uno.config.* 或 unocss.config.* 文件，以了解可用的预设、规则和快捷方式。如果项目配置不明确，请避免使用 attributify 模式和其他高级功能——只使用基本的 class。

此技能基于 UnoCSS v66.10.5，于 2026-09-25 生成。

核心

主题	描述	参考资料
配置	配置文件设置和所有配置选项	core-config
规则	用于生成 CSS 工具类的静态规则和动态规则	core-rules
快捷方式	将多条规则组合成单个简写	core-shortcuts
主题	用于颜色、断点和设计令牌的主题系统	core-theme
变体	为规则应用 hover:、dark:、响应式等变体	core-variants
提取	UnoCSS 如何从源代码中提取工具类	core-extracting
安全列表和阻止列表	强制包含或排除指定的工具类	core-safelist
图层和预置样式	CSS 图层排序和原始 CSS 注入	core-layers
处理器	转换生成的 CSS 图层（包括 Lightning CSS）	core-processors

预设

主要预设

主题	描述	参考资料
预设 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 Fonts 和其他 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

支持 Markdown

登录后评论