UnoCSS 原子化 CSS 引擎教程 - 即时、灵活、Tailwind 超集，前端开发必备

unocss by uni-helper/skills

218 周安装量

42 GitHub Stars

GitHub

安装命令

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

CSS 工程/构建系统前端架构

🇨🇳中文介绍

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 开发者，精准高效

联系我们

相关 Skills

网页可访问性（A11y）开发指南：实现WCAG合规、键盘导航与屏幕阅读器支持

12,600 周安装

响应式设计教程：移动优先CSS布局、Flexbox/Grid与图像优化实战指南

11,200 周安装

Bun 技能指南：一体化 JavaScript/TypeScript 运行时与工具包，替代 Node.js

639 周安装

Android原生开发指南：项目初始化、Gradle配置与构建变体管理

498 周安装

主题	描述	参考链接
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

154

Repository

uni-helper/skills

GitHub Stars

First Seen

Jan 30, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

codex146

opencode143

gemini-cli142

kimi-cli139

github-copilot139

amp139

HeroUI v2 到 v3 迁移指南：破坏性变更、复合组件、Tailwind v4 升级

490 周安装