unocss

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.*

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.

UnoCSS 是一款即时原子化CSS引擎，设计灵活且可扩展。其核心不带有主观预设——所有CSS工具类均通过预设提供。它是Tailwind CSS的超集，因此你可以复用已有的Tailwind知识来使用基础语法。

重要提示： 在编写UnoCSS代码之前，开发人员应检查项目根目录下的

uno.config.*

或

unocss.config.*

文件，以了解可用的预设、规则和快捷方式。如果项目配置不明确，请避免使用属性化模式等高级功能——坚持使用基础的

class

用法。

本技能基于 UnoCSS 66.x 版本，生成于 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

主题	描述	参考文档
配置	配置文件设置及所有配置选项	core-config
规则	用于生成CSS工具类的静态和动态规则	core-rules
快捷方式	将多个规则组合为单个简写形式	core-shortcuts
主题	用于颜色、断点和设计令牌的主题系统	core-theme
变体	为规则应用hover:、dark:、响应式等变体	core-variants
提取	UnoCSS如何从源代码中提取工具类	core-extracting
安全列表与阻止列表	强制包含或排除特定工具类	core-safelist
层级与预定义样式	CSS层级排序和原始CSS注入	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

主题	描述	参考文档
Preset Wind3	兼容Tailwind CSS v3 / Windi CSS的预设（最常用）	preset-wind3
Preset Wind4	兼容Tailwind CSS v4的预设，支持现代CSS特性	preset-wind4
Preset Mini	包含基础工具类的极简预设，适用于自定义构建	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	preset-rem-to-px

主题	描述	参考文档
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

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

主题	描述	参考文档
Variant Group	为带有共同前缀的工具类提供简写形式	transformer-variant-group
Directives	CSS指令：@apply、@screen、theme()、icon()	transformer-directives
Compile Class	将多个类编译为单个哈希类	transformer-compile-class
Attributify JSX	在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

主题	描述	参考文档
Vite Integration	配置UnoCSS与Vite集成及框架特定提示	integrations-vite
Nuxt Integration	用于Nuxt应用的UnoCSS模块	integrations-nuxt