Windi CSS和Tailwind CSS以及UnoCSS

白鲸ld2023-09-02 19:51

最近合作在写一个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;