用途:UnoCSS 是即时按需的原子化 CSS 引擎,仅为你实际使用的工具类生成 CSS,适合搭建 utility-first 样式、配置预设与规则、从类名生成原子 CSS、用纯 CSS 图标,以及作为 Tailwind CSS 的更快替代方案。它不做 CSS 转译/压缩(可用 Lightning CSS)、不做 CSS 规则 lint(可用 Stylelint),也不提供 CSS-in-JS 运行时。
主要能力:基于正则直接提取类名,无解析、无 AST;所有工具类来自预设,可完全自定义;框架无关,支持 Vite、Webpack、PostCSS、Nuxt、Astro、Svelte 与 CLI;可扩展自定义规则、变体、快捷方式、提取器与转换器;内置 Inspector 开发调试工具。预设包括 presetWind3(兼容 Tailwind v3)、presetWind4(兼容 Tailwind v4)、presetIcons、presetAttributify、presetTypography、presetWebFonts、presetMini。
使用方式:Vite 项目安装 npm add -D unocss,在 vite.config.ts 中引入 UnoCSS() 插件,并在入口导入 'virtual:uno.css';配置文件 uno.config.ts 用 defineConfig 配置 presets、rules、shortcuts、theme、safelist、layers、transformers。CLI 安装 npm add -D @unocss/cli,用法如 unocss "src/**/*.{html,tsx,vue}" -o dist/uno.css,支持 --minify、--stdout、--watch、--config、--preflights、--preset 等参数。图标需安装 @iconify-json 集合,模板中用 i-mdi-home 等类名。开发服务器访问 /__unocss 查看 Inspector。
适用场景与限制:适合需要快速、轻量原子 CSS 的前端项目,尤其是 Vite/Nuxt/Astro 集成与替换 Tailwind 的场景。若需要 Tailwind 专属插件生态、传统 CSS 架构(如 BEM)或 CSS-in-JS 运行时,则不适合。插件顺序上 React(Babel) 与 Svelte 需置于对应框架插件之前,Vue 位置不限。部分模式(per-module、dist-chunk)为实验性。具体收费、价格与平台信息暂未提供。