UnoCSS 即时原子化 CSS 引擎：灵活可扩展，Tailwind CSS 超集，前端开发必备

unocss by antfu/skills

6,400 周安装量

4,300 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/antfu/skills --skill unocss

开发

🇨🇳中文介绍

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

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

此技能基于 UnoCSS 66.x 版本，生成于 2026-01-28。

核心

主题	描述	参考链接
配置	配置文件设置及所有配置选项	core-config
规则	用于生成 CSS 工具类的静态和动态规则	core-rules
快捷方式

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

主题	描述	参考链接
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	用于排版默认值的散文类	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

主题	描述	参考链接
Variant Group	用于分组具有共同前缀的工具类的简写	transformer-variant-group
Directives	CSS 指令：@apply, @screen, theme(), icon()	transformer-directives
Compile Class	将多个类编译成一个哈希类	transformer-compile-class
Attributify JSX	在 JSX/TSX 中支持无值的 attributify	transformer-attributify-jsx

主题	描述	参考链接
Vite 集成	使用 Vite 设置 UnoCSS 及特定框架提示	integrations-vite
Nuxt 集成	用于 Nuxt 应用的 UnoCSS 模块	integrations-nuxt

🇺🇸English

UnoCSS is an instant atomic CSS engine designed to be flexible and extensible. The core is un-opinionated - all CSS utilities are provided via presets. It's a superset of Tailwind CSS, so you can reuse your Tailwind knowledge for basic syntax usage.

Important: Before writing UnoCSS code, agents should check for uno.config.* or unocss.config.* files in the project root to understand what presets, rules, and shortcuts are available. If the project setup is unclear, avoid using attributify mode and other advanced features - stick to basic class usage.

The skill is based on UnoCSS 66.x, generated at 2026-01-28.

Core

Topic	Description	Reference
Configuration	Config file setup and all configuration options	core-config
Rules	Static and dynamic rules for generating CSS utilities	core-rules
Shortcuts	Combine multiple rules into single shorthands	core-shortcuts
Theme	Theming system for colors, breakpoints, and design tokens	core-theme
Variants	Apply variations like hover:, dark:, responsive to rules	core-variants
Extracting	How UnoCSS extracts utilities from source code	core-extracting
Safelist & Blocklist	Force include or exclude specific utilities	core-safelist
Layers & Preflights	CSS layer ordering and raw CSS injection	core-layers

Presets

Main Presets

Topic	Description	Reference
Preset Wind3	Tailwind CSS v3 / Windi CSS compatible preset (most common)	preset-wind3
Preset Wind4	Tailwind CSS v4 compatible preset with modern CSS features	preset-wind4
Preset Mini	Minimal preset with essential utilities for custom builds	preset-mini

Feature Presets

Topic	Description	Reference
Preset Icons	Pure CSS icons using Iconify with any icon set	preset-icons
Preset Attributify	Group utilities in HTML attributes instead of class	preset-attributify
Preset Typography	Prose classes for typographic defaults	preset-typography
Preset Web Fonts	Easy Google Fonts and other web fonts integration	preset-web-fonts
Preset Tagify	Use utilities as HTML tag names	preset-tagify
Preset Rem to Px	Convert rem units to px for utilities

Transformers

Topic	Description	Reference
Variant Group	Shorthand for grouping utilities with common prefixes	transformer-variant-group
Directives	CSS directives: @apply, @screen, theme(), icon()	transformer-directives
Compile Class	Compile multiple classes into one hashed class	transformer-compile-class
Attributify JSX	Support valueless attributify in JSX/TSX	transformer-attributify-jsx

Integrations

Topic	Description	Reference
Vite Integration	Setting up UnoCSS with Vite and framework-specific tips	integrations-vite
Nuxt Integration	UnoCSS module for Nuxt applications	integrations-nuxt

Weekly Installs

4.2K

Repository

antfu/skills

GitHub Stars

4.0K

First Seen

Jan 28, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

opencode3.2K

codex3.1K

gemini-cli3.1K

github-copilot2.9K

cursor2.8K

kimi-cli2.6K