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;

相关推荐
全宝5 分钟前
🎨前端实现文字渐变的三种方式
前端·javascript·css
没有钱的钱仔9 分钟前
STM32低功耗模式全面指南
css·stm32·css3
yanlele28 分钟前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮35 分钟前
【无标题】
开发语言·前端·javascript
谦行1 小时前
深度神经网络训练过程与常见概念
前端
Simon_He1 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃2 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军2 小时前
React 协调器 render 阶段
前端·react.js·前端框架