Windi CSS和Tailwind CSS以及UnoCSS

最近合作在写一个vue3+ts的项目,看到其他人用了一种写法,我觉得很奇怪,之前没见过,他是这样写的

html 复制代码
 <div class="news flex-1 h-40px flex"></div>

我不理解的是为什么这样写就会让这个div的高度就是40px,好多代码都是这样,我去css里边搜索发现并没有额外设置什么,带着好奇我就搜了一下,原来是Windi CSS的用法。

介绍

通过扫描HTML和CSS并按需生成实用程序,Windi CSS能够在开发中提供更快的加载时间和快速的HMR,并且不需要再生产中进行清除。
Windi CSS支持Tailwind CSS的所有实用程序,无需任何额外配置。
UnoCSS是一个具有高性能且极具灵活的即时原子化CSS引擎,具有按需加载的特性。原子化CSS是一种CSS的架构方式,它倾向于小巧且用途单一的class,并且会以视觉效果进行命名。

对比

Windi CSS相比于Tailwind CSS具有按需加载,零依赖等特性。在CSS文件打包的大小与加载速度上有很大的提升。

基本用法

javascript 复制代码
import 'virtual:windi.css'
html 复制代码
<div class="space-y-0.5">
   <p class="text-lg text-black font-semibold">Erin Lindford</p>
    <p class="text-gray-500 font-medium">Product Engineer</p>
  </div>

原子化CSS的优势

1.提高开发效率 利用原子化框架提供的预设原子类,在少量样式编写上可以极大的提高开发效率,不需要单独定义在样式文件中;

2.免去起名烦恼 我们经常会因为起名而烦恼,之前也尝试过各种css命名方法,包括BEM,然而当html层级嵌套比较深的情况下,BEM命名法也会有起名难,不直观的缺陷

3.避免样式堆积 可以很好的避免你是样式的堆积,不存在你是样式类的不敢删除问题,有效的减少CSS的体积

4.样式隔离 天然的支持组件间的样式隔离,没有自定义的css也就无需担心组件之间样式的影响。

默认单位

默认单位是rem, 1rem = 16px;

相关推荐
祝余呀12 分钟前
HTML初学者第三天
前端·html
就爱瞎逛28 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81631 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者1 小时前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW3 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字3 小时前
Kotlin lazy 委托的底层实现原理
前端