UnoCSS
高度可定制、即时按需生成样式的原子 CSS 引擎。
项目概述
UnoCSS 本身不预设固定的工具类体系，而是通过 Preset、Rule、Variant、Shortcut 和 Transformer 组合出项目需要的原子 CSS，并只为源码中实际匹配到的标记生成样式。
UnoCSS 是由 Anthony Fu 发起、采用 MIT 许可证的即时按需原子 CSS 引擎。它的核心保持无预设立场，不内置一套不可替换的工具类；常见的 Tailwind/Windi 风格、Attributify、图标、排版和 Web Font 能力都由 Preset 提供。构建工具从模板和组件中提取候选标记，匹配静态或动态 Rule 后生成实际需要的 CSS。团队可以用 Shortcut 封装重复组合，用 Variant 表达响应式与状态，用 Transformer 扩展分组语法和指令，并通过 Vite、Nuxt、Astro、Webpack、PostCSS、CLI 等集成接入不同技术栈。
主要特点
UnoCSS 把原子 CSS 拆成可组合的引擎、规则、预设与源码转换层，让团队能够选择现成语法或建立自己的样式体系。
即时按需生成
只有当源码中出现可匹配标记时才生成对应 CSS，不需要预先构建整套工具类，也不会把未使用规则全部加入产物。
无预设立场的核心
核心引擎不强制颜色、间距或类名体系，团队可使用官方 Preset、社区 Preset，或只定义自己的 Rule。
静态与动态 Rule
既能把固定标记映射为 CSS，也能用正则和处理函数生成带参数的动态工具类，并读取 Theme 等上下文。
Preset 组合生态
preset-mini、preset-wind3、preset-wind4、Attributify、Icons、Typography 和 Web Fonts 覆盖常见样式需求。
Shortcut 与设计抽象
可把多条 Utility 合并为有语义的 Shortcut，也能使用动态 Shortcut，把重复组件模式沉淀成统一入口。
Transformer 扩展语法
Variant Group、Directives、Compile Class 和 Attributify JSX 等 Transformer 可在生成前转换源码表达。
多构建工具集成
官方支持 Vite、Nuxt、Astro、Webpack、PostCSS、CLI 和 Runtime，并为多种框架提供针对性的顺序和提取建议。
图标与开发工具
preset-icons 可把 Iconify 图标生成为纯 CSS，Inspector、Playground、VS Code、JetBrains 与 ESLint 集成帮助查找和调试规则。
适用场景
适合重视生成速度、跨框架集成或需要深度定制 Utility 语法、图标与设计令牌的前端项目。
现代组件化 Web 应用
在 Vue、React、Svelte、Solid、Astro 或 Nuxt 项目中按需生成 Utility CSS，并通过组件封装复杂组合。
自定义 Utility 设计系统
使用 Theme、Rule、Shortcut 和 Preset 把品牌令牌、布局规则与组件模式整理为团队自己的样式语言。
大量图标的产品界面
通过 preset-icons 和所需 Iconify 集合按类名生成图标，避免手工维护大量 SVG 组件或完整图标包。
多框架 Monorepo
共享 UnoCSS Preset 和 Theme，让多个应用在保留各自框架工具链的同时复用设计令牌与 Utility 约定。
文档、内容站和静态生成
结合 Astro、Nuxt、VitePress 或 CLI，从 Markdown、模板和组件中提取标记并生成较精简的静态 CSS。
渐进替换既有 Utility 方案
preset-wind3 或 preset-wind4 可提供熟悉语法，团队可先验证页面，再逐步加入 UnoCSS 专属能力。
优点与注意事项
技术选型不仅要看能力，也要理解它带来的团队成本。
主要优点
UnoCSS 擅长的地方
- 只为匹配到的标记生成 CSS，开发反馈和产物控制较直接
- 核心、Preset、Rule、Variant 与 Transformer 的组合能力很强
- 既能采用熟悉的 Wind 风格，也能设计完全自定义的 Utility 体系
- 图标、Attributify、Variant Group 和 Shortcut 等能力可按需启用
- Vite、Nuxt、Astro、Webpack、PostCSS 和 CLI 等集成覆盖广
- 配置可打包为共享 Preset，适合跨应用复用设计令牌和约定
需要注意
采用前应考虑的问题
类似 `bg-${color}-500` 的不完整字符串通常无法静态识别，应映射到完整类名、配置 safelist，或编写明确的动态 Rule。
UnoCSS 核心没有固定工具类。更换或组合 Preset 会影响可用类名、Preflight、Theme 和生成结果，团队必须锁定配置。
preset-wind3、preset-wind4 与 Tailwind CSS 在细节、插件、默认值和边缘语法上可能不同，迁移应以真实页面回归验证。
Rule、Shortcut 和自定义 Variant 过多时容易形成只有少数人理解的方言，应限制扩展入口并记录命名约定。
React Compiler、Svelte、Solid、Marko 和其他插件可能要求特定顺序或额外 Extractor，配置前应查阅对应集成说明。
属性式 Utility 能缩短 class，但会改变模板阅读方式，并可能影响类型检查、格式化或第三方工具，应先统一团队选择。
DevTools 中临时添加的类和运行时生成内容可能只在开发期生效，应通过 safelist、生产构建检查和视觉回归避免漏样式。
快速开始
在 Vite TypeScript 项目中配置 Wind3、Attributify、Icons 和 Variant Group，生成一个最小产品卡片。
bashnpm create vite@latest uno-app -- --template vanilla-ts
cd uno-app
npm install
npm install -D unocss @iconify-json/carbontypescriptimport { defineConfig } from "vite";
import UnoCSS from "unocss/vite";
export default defineConfig({
plugins: [UnoCSS()],
});typescriptimport {
defineConfig,
presetAttributify,
presetIcons,
presetWind3,
transformerVariantGroup,
} from "unocss";
export default defineConfig({
presets: [
presetWind3(),
presetAttributify(),
presetIcons(),
],
theme: {
colors: {
brand: "#6d5dfc",
},
},
shortcuts: {
"btn-primary":
"inline-flex items-center gap-2 rounded-lg bg-brand px-4 py-2 text-white hover:opacity-90",
},
transformers: [transformerVariantGroup()],
safelist: ["i-carbon-sun", "i-carbon-moon"],
});typescript// src/main.ts
import "virtual:uno.css";
import "./style.css";html<main class="min-h-screen grid place-items-center bg-slate-950 p-6">
<article class="max-w-md rounded-2xl bg-white p-8 shadow-xl">
<div class="i-carbon-flash text-3xl text-brand"></div>
<h1 class="mt-4 text-3xl font-bold text-slate-950">
Hello UnoCSS
</h1>
<p class="mt-3 text-slate-600">
即时、按需生成的原子 CSS。
</p>
<button class="btn-primary mt-6 focus:(outline-none ring-2 ring-brand)">
<span class="i-carbon-arrow-right"></span>
开始构建
</button>
</article>
</main>bashnpm run dev
# 提交前检查最终生成结果
npm run build
npm run preview下一步：先选择一种主要 Preset 和统一的设计令牌，再逐步加入 Shortcut、Icon 与 Transformer。动态状态应映射到完整类名或加入 safelist，生产构建后还要检查生成 CSS，避免只在开发模式中可见。
类似项目
这些工具同样解决 Utility CSS、按需生成或设计系统工程化问题，但默认语法和约束程度不同。
UnoCSS vs Tailwind CSS
UnoCSS 和 Tailwind CSS 都能按需生成 Utility CSS。Tailwind 提供明确、集成度高的官方设计体系，UnoCSS 则把核心做成可扩展引擎，由 Preset、Rule 和 Transformer 决定实际语法。
| 比较维度 | UnoCSS | Tailwind CSS |
|---|---|---|
| 核心定位 | 可定制的按需原子 CSS 引擎 | 拥有统一官方语法的 Utility-first CSS 框架 |
| 默认能力 | 核心无固定 Utility，能力来自 Preset | 提供完整且一致的官方 Utility 与设计令牌体系 |
| 生成方式 | 提取候选标记并按 Rule 即时生成 | 扫描源码并生成实际使用的官方 Utility |
| 扩展模型 | Rule、Variant、Shortcut、Preset、Transformer | Theme、Utility、Variant 和官方构建工具 |
| 额外语法 | 可选 Attributify、Variant Group、Compile Class | 主要围绕 class 与 CSS 中的 Tailwind 指令 |
| 图标能力 | preset-icons 将 Iconify 图标生成为 CSS | 通常使用组件库或独立图标方案 |
| 生态一致性 | 选择灵活，但不同 Preset 和配置可能差异很大 | 官方约定集中，教程、组件和人才生态更统一 |
| 更适合 | 需要极强定制、多框架共享或专用 Utility 语法的团队 | 希望采用成熟标准、组件生态和一致工作流的团队 |
如果团队希望使用主流 Utility 约定、丰富组件生态和相对统一的升级路径，Tailwind CSS 通常是更稳妥的默认选择；如果需要自定义 Rule、Attributify、CSS 图标、多种 Preset 或跨框架共享专用样式语言，UnoCSS 更灵活。迁移现有 Tailwind 页面时，应逐页核对生成 CSS，而不要把 Wind Preset 当作完全兼容层。
资料核验
版本、维护信息与本页采用的官方资料来源。
本页依据 UnoCSS 官方指南、Vite 集成、Preset、Rule、Shortcut 文档和官方源码仓库整理。快速开始采用当前官方导入方式，显式配置 Wind3、Attributify、Icons 与 Variant Group；不同框架的插件顺序和提取规则不同，生产使用前应按目标集成文档再次核对。
官方仓库未归档，核验时最近可见的代码活动日期为 2026 年 7 月 27 日。该状态表示项目近期仍有公开维护活动，不代表固定发布频率或长期支持承诺。