原子化CSS（Atomic CSS)

每天吃饭的羊2023-09-13 13:20

UnoCSS，它不是像TailWind CSS和Windi CSS属于框架，而是一个引擎，它没有提供预设的原子化CSS工具类。引用自掘金，文章中实现相同的功能，构建后的体积TailWind 远> Windi > UnoCSS,体积会小很多。

像这种原子性的CSS应该在大公司会用到吧！目前还没用过，用过的都说好用，没用过的人说它代码太多了，下面就单纯实现下如何在项目中使用UnoCSS。

首先使用vite新建一个vue项目模板；

然后看上方掘金文章的下部分，就可以使用UnoCSS了

相关推荐
研來如此1 小时前
C++ 接口设计 && Doxygen 注释
前端·javascript·c++
野槐2 小时前
Electron开发
前端·javascript·electron
#做一个清醒的人2 小时前
【Electron】开发两年Electron项目评估报告
前端·electron
lizhongxuan8 小时前
Claude Code 防上下文爆炸：源码级深度解析
前端·后端
柳杉9 小时前
震惊！字符串还能这么玩！
前端·javascript
是上好佳佳佳呀10 小时前
【前端(五)】CSS 知识梳理：浮动与定位
前端·css
wefly201710 小时前
纯前端架构深度解析：jsontop.cn，JSON 格式化与全栈开发效率平台
java·前端·python·架构·正则表达式·json·php
我命由我1234512 小时前
React - 类组件 setState 的 2 种写法、LazyLoad、useState
前端·javascript·react.js·html·ecmascript·html5·js
自由生长202412 小时前
IndexedDB的观察
前端
IT_陈寒13 小时前
Vite热更新坑了我三天，原来配置要这么写
前端·人工智能·后端
热门推荐
01GitHub 镜像站点022026年3月AI领域大事件：DeepSeek引领开源风暴03Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）04Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services05UV安装并设置国内源06如何解决 OpenClaw “Pairing required” 报错：两种官方解决方案详解07让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南08AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南09深扒 Claude Code Buddy 模式：一只仙人掌背后的确定性随机算法10“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）