unocss
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseUnoCSS 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 or 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 usage.
uno.config.*unocss.config.*classThe 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 |