unocss.dev 暂未发现付费内容

UnoCSS是什么网站?

UnoCSS 是一个即时按需生成 Atomic CSS 的引擎，官网域名 UnoCSS。它的核心用途是：你写类名，它按需产出对应的 CSS，而不是预先打包一整套工具类样式表。

主要特点

• 按需生成：只有实际用到的规则才会进入最终 CSS，通常体积更小。
• 原子化/工具类思路：与 Tailwind CSS 等工具类框架的使用方式相近，但更强调引擎化和可扩展。
• 预设与规则可定制：可通过 preset、rule、shortcut 等机制定义自己的类名体系，也能兼容常见的工具类写法。
• 多种构建工具集成：通常以 Vite、Webpack 等插件形式接入，也可在部分框架生态中使用。
• 支持变体与快捷方式：如响应式、暗色模式等变体，以及把多个类名组合成一个 shortcut。

适合谁

适合已经在用原子化 CSS、希望减少样式体积，或想自建一套类名规则的前端项目。它更像底层引擎，而不是一套固定设计系统；具体能力取决于你启用的预设和配置。是否启用某项特性、支持哪些写法，以站内当前文档和选项为准。

UnoCSS 和 Tailwind CSS 有什么区别?

UnoCSS 和 Tailwind CSS 都是原子化 CSS 工具，但定位和实现方式差别较大。

核心理念不同

Tailwind CSS 是一套完整的、有明确设计规范的 CSS 框架，提供固定的工具类集合和配置体系。UnoCSS 更像一个原子 CSS 引擎，本身不预设具体类名，而是通过预设（preset）来生成工具类，其中常见的 preset-wind、preset-mini 等可以兼容 Tailwind 风格的语法。

类名与规则来源

Tailwind 的类名和规则由官方定义，扩展主要靠配置文件。UnoCSS 的规则大多来自你启用的预设或自定义规则，因此同一套写法在不同预设下可能表现不同，灵活度更高，但需要自己明确配置。

按需生成与产物

两者都支持按需生成、只输出用到的样式。UnoCSS 通常强调更快的构建速度与更小的产物体积，并支持属性化模式（把工具类写成 HTML 属性）、纯 CSS 图标等能力，这些属于引擎层面的特性，是否启用取决于你的配置和预设。

生态与上手

Tailwind 生态成熟，文档、组件库和社区资源丰富，适合想要开箱即用、约定统一的团队。UnoCSS 更适合愿意自行组合预设、追求极致性能或需要兼容多种原子化语法的项目。

兼容性

UnoCSS 可以解析大部分 Tailwind 语法，但并非完全等价；Tailwind 的插件、部分变体和配置项不一定能直接迁移。反之，UnoCSS 的预设专属能力也不是 Tailwind 原生自带的。

选择时看团队更看重“约定完善、生态齐全”还是“轻量灵活、可自定义”。具体以站内当前选项为准。

UnoCSS 的按需生成机制是如何工作的?

UnoCSS 的核心是按需生成：它不会预先生成整套原子类 CSS，而是扫描你的源码，找出实际用到的工具类，再只生成对应的 CSS 规则。

工作流程大致如下：

• 扫描（Scan）：从配置的 content 或默认文件范围中提取源码文本，通常包括 HTML、JS/TS、Vue、React 等模板与脚本文件。
• 提取（Extract）：用分词器从文本里切出可能的类名候选。默认提取器基于通用规则，对引号内、模板字符串、class 属性等位置的字符串做匹配。
• 匹配（Match）：把候选交给一组规则（rules）和预设（presets）去比对。比如 p-4 命中间距规则，text-red-500 命中颜色规则。规则本质是“正则/匹配器 → CSS 对象”的映射。
• 生成（Generate）：命中的候选被转换成 CSS 规则，写入一个虚拟模块（通常以 virtual:uno.css 之类形式暴露），由构建工具或 Vite 插件注入到页面。
• 去重与合并：同一工具类只生成一次，重复出现不会重复输出。

关键特性：

• 即时性：生成发生在开发服务器请求或构建时，改代码后新增的类会立刻出现，无需手动维护 CSS 文件。
• 可扩展：通过 presets（如 @unocss/preset-wind、preset-attributify）和自定义 rules、shortcuts 扩展可识别的语法。
• 按需的边界：只有被提取器识别到的候选才会生成；动态拼接、运行时才确定的类名通常不会被扫描到，需要显式加入安全列表（safelist）或调整提取方式。

因此，UnoCSS 的“按需”依赖“扫描—提取—匹配—生成”这条链路，链路上任何一环覆盖不到，对应样式就不会出现在最终 CSS 中。具体行为以站内当前配置选项为准。

如何在 Vite 项目中集成 UnoCSS?

在 Vite 项目中集成 UnoCSS 通常需要两步：安装依赖，然后在 Vite 配置中启用插件。

安装

使用你常用的包管理器安装 UnoCSS 和 Vite 插件：

npm i -D unocss

unocss 包已包含 Vite 插件，通常不需要额外安装 @unocss/vite。

配置 Vite

在 vite.config.ts 中引入并注册插件：

import { defineConfig } from 'vite'
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

引入样式入口

在应用入口文件（如 main.ts）中引入虚拟模块：

import 'virtual:uno.css'

这一步让生成的原子样式注入页面。若使用预设，还需要在 uno.config.ts 中配置：

import { defineConfig, presetUno } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
  ],
})

常见注意点

• 虚拟模块名以 virtual: 开头，不要写成真实文件路径。
• 使用框架时，可搭配对应的预设或转换器处理 JSX、SFC 等场景。
• 开发和生产构建都由插件处理，通常无需单独生成 CSS 文件。
• 若样式未生效，先确认入口已引入 virtual:uno.css，且配置文件被正确加载。

具体可用的预设和选项以站内当前文档为准。

UnoCSS 支持哪些预设和插件?

UnoCSS 本身是引擎，功能主要通过预设（presets）和插件（plugins）扩展。以下为官方仓库中常见的几类。

官方预设

• @unocss/preset-uno：默认预设，兼容 Tailwind、Windi 等常用工具类，适合大多数项目直接使用。
• @unocss/preset-wind3 / preset-wind4：分别对应 Tailwind CSS v3、v4 的兼容预设。
• @unocss/preset-attributify：支持属性化写法，把工具类写成 HTML 属性。
• @unocss/preset-icons：按需生成图标类，通常配合 Iconify 图标集使用。
• @unocss/preset-web-fonts：按需加载 Google Fonts 等网络字体。
• @unocss/preset-typography：提供类似 prose 的排版样式。
• @unocss/preset-mini：更小体积的基础预设，常作为其他预设的底层。
• @unocss/preset-tagify：把工具类写进自定义标签。
• @unocss/preset-rem-to-px：把 rem 单位转换为 px。

常见插件与集成

• @unocss/preset-forms、preset-typography 等属于补充预设，扩展表单、排版等场景。
• @unocss/transformer-variant-group：支持 hover:(...) 这类分组写法。
• @unocss/transformer-directives：支持 @apply 等指令。
• @unocss/transformer-compile-class：把一组类编译成单个类名。
• @unocss/transformer-attributify-jsx：让属性化写法在 JSX 中可用。
• Vite、Webpack、Nuxt、Astro、SvelteKit 等集成包：把 UnoCSS 接入对应构建工具或框架。

预设决定“能生成哪些工具类”，插件/转换器决定“怎么写、如何被识别”。具体可用项和命名随版本调整，以站内当前文档和包版本为准。

UnoCSS 适合在生产环境中使用吗?

UnoCSS 通常可以用于生产环境，但“适合”取决于项目类型和团队对构建链的掌控程度。

它的定位是按需生成的原子化 CSS 引擎，在构建时扫描源码，只产出实际用到的样式，因此产物体积通常较小，运行时开销也很低。它支持 Vite、Webpack、Rollup、PostCSS 等常见构建工具，并有预设（如 @unocss/preset-wind、preset-attributify）来提供接近 Tailwind 或 Windi CSS 的写法。这些特性让它在生产构建中具备可用基础。

需要注意的几点：

• 稳定性：UnoCSS 迭代较快，不同版本之间预设和配置项可能有变动。生产项目建议锁定版本，并关注升级说明。
• 动态类名：如果类名由字符串拼接或运行时计算生成，扫描可能无法识别，需要显式配置 safelist 或改用静态写法。
• 生态与工具：编辑器的自动补全、与既有 CSS 方案的共存、团队对原子化写法的接受度，都会影响实际体验。
• 第三方预设：社区预设的维护状态不一，引入前最好评估其更新频率。

总体而言，它适合愿意维护构建配置、接受原子化 CSS 的团队；对追求零配置或长期稳定 API 的项目，可能不如更成熟的方案省心。具体以站内当前选项为准。