原子化CSS(Atomic CSS)

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

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

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

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

相关推荐
繁依Fanyi37 分钟前
做一个 3D 图片画廊
前端
繁依Fanyi1 小时前
用 Electron 做一个屏幕取色器
前端
某公司摸鱼前端1 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·vue.js·react.js·i18n
OEC小胖胖1 小时前
给你的应用穿上“外衣”:React中的CSS方案对比与实践
前端·前端框架·react·web
excel1 小时前
Nuxt 3 微前端:模块导入导出与路由跳转实战
前端
大家的林语冰1 小时前
Promise 再次进化,ES2025 新增 Promise.try() 静态方法
前端·javascript·ecmascript 6
大家的林语冰1 小时前
如何错误手写 ES2025 新增的 Promise.try() 静态方法
前端·javascript·ecmascript 6
繁依Fanyi1 小时前
做一个石头剪刀布小游戏
前端
用户21411832636021 小时前
dify插件开发-Dify 插件如何顺利上架应用市场?流程 + 常见问题一次讲透
前端
繁依Fanyi1 小时前
从零到一,制作一个项目展示平台
前端