原子化CSS(Atomic CSS)

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

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

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

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

相关推荐
卡布叻_星星21 分钟前
Docker之Nginx前端部署(Windows版-x86_64(AMD64)-离线)
前端·windows·nginx
LYFlied21 分钟前
【算法解题模板】-解二叉树相关算法题的技巧
前端·数据结构·算法·leetcode
weibkreuz23 分钟前
React的基本使用@2
前端·javascript·react.js
于是我说27 分钟前
前端JavaScript 项目中 获取当前页面滚动位置
开发语言·前端·javascript
GISer_Jing28 分钟前
AI在前端开发&营销领域应用
前端·aigc·音视频
Hao_Harrision37 分钟前
50天50个小项目 (React19 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·react.js·typescript·tailwindcss·vite7
来杯三花豆奶1 小时前
Vue 2.0 Mixins 详解:从原理到实践的深度解析
前端·javascript·vue.js
code_YuJun1 小时前
脚手架开发工具——dotenv
前端
San30.1 小时前
深度驱动:React Hooks 核心之 `useState` 与 `useEffect` 实战详解
前端·javascript·react.js
Mr_Swilder1 小时前
vscode没有js提示:配置jsconfig配置
前端