3步跑通 UnoCSS新手快速上手的完整指南【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocssUnoCSS 是一个即时按需生成原子化 CSS 的引擎你写的 class 它才生成没写的样式一个字节都不会打包。本文带你从零把 UnoCSS 接入自己的项目本地验证通过后 3 分钟部署到 Netlify全程只用几条关键命令。先搞清楚传统 CSS 工具卡在哪想象这样一个场景项目里攒了几个万行的 CSS 文件构建产物动辄几百 KB。你删掉了一个组件样式却还在里面躺着——死代码没人敢动。更糟的是样式写在全局两个页面用了同名 class改一个坏一片。原子化 CSS 的思路反过来不写 CSS 文件直接在 HTML 里用classp-4 text-red-500这样的短类名组合出样式。但这里藏着一个关键问题——类名是动态的构建工具怎么知道你哪些用到了这正是 UnoCSS 要解决的事。它不做全量扫描、不解析 AST而是像正则提取一样从源码里捞出类名捞到哪个就编译哪个。这就是on-demand按需的含义也是它号称比同类方案快数倍的原因可在 docs/guide/why.md 里看到官方的技术对比。一分钟理解类名是怎么变成 CSS 的UnoCSS 的核心是规则 预设。你可以把它理解成一个翻译器规则rules定义什么样的类名 → 什么 CSS。可以写死一条也可以用正则写成动态的。比如一条正则规则就能让m-1、m-7.5这种任意数值的 margin 类名全部生效用多少编译多少。预设presets官方把常用规则打包成了预设最常用的是presetWind3Tailwind 风格。你在配置里挂上预设就等于拿到一整套开箱即用的原子类。细节可以晚点再挖官方指南 里有完整讲法。现在先动手。三步接入装包、挂插件、引样式以 Vite 项目为例React、Vue、Svelte 都一样差异在插件顺序Vite 集成文档 有逐个框架的说明。第 1 步安装。UnoCSS 的 Vite 插件直接随主包发布一条命令搞定pnpm add -D unocss第 2 步挂载插件。在vite.config.ts里把插件加进plugins数组import UnoCSS from unocss/vite export default defineConfig({ plugins: [ UnoCSS(), ], })第 3 步引入生成的样式。在入口文件如main.ts顶部加一行import virtual:uno.css这行virtual:uno.css是 Vite 的虚拟模块——它不是磁盘上真实存在的文件而是插件在构建时动态吐出来的 CSS。跑pnpm dev页面上用到的每一个原子类都已经被编译好了。整个接入过程就这三件事。真实配置长什么样看一个完整例子仓库里带了十几个可运行的示例我拿 examples/vite-react/ 给你看个满配版。它的vite.config.ts里挂了三个预设import presetWind3 from unocss/preset-wind3 import presetAttributify from unocss/preset-attributify import presetIcons from unocss/preset-icons plugins: [ UnoCSS({ presets: [presetWind3(), presetAttributify(), presetIcons()], shortcuts: [ { logo: i-logos-react w-6em h-6em hover:rotate-180 }, ], }), React(), ]三个预设各管一摊正好能帮你建立认知预设解决的问题用法示例presetWind3基础原子类间距、颜色、布局p-4 text-red-500presetAttributify把 class 拆进属性写长列表不撑爆标签p-44 text-red-500presetIcons一个类名 一个图标免引图标字体i-logos-react另外注意shortcuts快捷方式给logo这个名字绑了一串类名以后写classlogo就等效于那一大串。它是团队里沉淀设计语言的常用手段详见 docs/config/shortcuts.md。小提示如果你不需要 attributify 和 icons只留presetWind3()就够跑起来。预设是越多越灵活不是越多越好。验证与部署怎么确认它真在工作本地验证看两点。第一浏览器开发者工具里打开 Network找到样式表你能看到里面只有当前页面用到的类——这就是按需的肉眼证据。第二更省事的是官方 Inspector在插件里打开clientInspector: true开发时会弹出一个可视化面板直接搜索类名看它编译成了什么 CSS调试体验比 F12 舒服很多用法见 docs/tools/inspector.md。部署到 Netlify 基本零成本。这个仓库本身就部署在 Netlify 上根目录的 netlify.toml 可以直接抄。核心就三行[build] publish docs/dist command git fetch --tags pnpm run deploy [build.environment] NODE_VERSION 24publish指构建产物目录换成你自己的 dist 路径command是构建命令普通项目写成pnpm install pnpm run build即可NODE_VERSION建议写 24。UnoCSS 主仓库要求 Node 22见根 package.json 的engines字段部署平台版本低了是最常见的构建失败原因。大项目构建时若报内存溢出参考本仓库的做法环境变量里加NODE_OPTIONS --max_old_space_size4096给 Node 留 4GB 堆内存。上线后的验收路径打开 Netlify 给的随机域名 → 页面样式正常加载 → 控制台无 404 资源。如果样式全丢九成是入口文件里忘了import virtual:uno.css回查第 3 步即可。总结你的 UnoCSS 上手清单pnpm add -D unocss装包vite.config.ts挂UnoCSS()插件入口文件加import virtual:uno.css按需挂载presetWind3等预设短类名用shortcuts沉淀用 Inspector 面板验证按需生成是否生效抄一份netlify.toml注意publish路径和 Node 版本推仓库即可上线从第一条到站点上线顺利的话就是杯咖啡的时间。想继续深入建议按这个顺序读docs/guide/index.md 了解核心概念docs/guide/presets.md 选预设然后翻 examples/ 目录找和你技术栈一致的示例照着抄——官方示例都是真跑的配置比任何教程都可靠。【免费下载链接】unocssThe instant on-demand atomic CSS engine.项目地址: https://gitcode.com/GitHub_Trending/un/unocss创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考