最近合作在寫一個(gè)vue3+ts的項(xiàng)目，看到其他人用了一種寫法，我覺得很奇怪，之前沒見過，他是這樣寫的

 <div class="news flex-1 h-40px flex"></div>

我不理解的是為什么這樣寫就會(huì)讓這個(gè)div的高度就是40px,好多代碼都是這樣，我去css里邊搜索發(fā)現(xiàn)并沒有額外設(shè)置什么，帶著好奇我就搜了一下，原來是Windi CSS的用法。

介紹

通過掃描HTML和CSS并按需生成實(shí)用程序，Windi CSS能夠在開發(fā)中提供更快的加載時(shí)間和快速的HMR，并且不需要再生產(chǎn)中進(jìn)行清除。
Windi CSS支持Tailwind CSS的所有實(shí)用程序，無需任何額外配置。
UnoCSS是一個(gè)具有高性能且極具靈活的即時(shí)原子化CSS引擎，具有按需加載的特性。原子化CSS是一種CSS的架構(gòu)方式，它傾向于小巧且用途單一的class,并且會(huì)以視覺效果進(jìn)行命名。

對比

Windi CSS相比于Tailwind CSS具有按需加載，零依賴等特性。在CSS文件打包的大小與加載速度上有很大的提升。

基本用法

import 'virtual:windi.css'

<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的優(yōu)勢

1.提高開發(fā)效率 利用原子化框架提供的預(yù)設(shè)原子類，在少量樣式編寫上可以極大的提高開發(fā)效率，不需要單獨(dú)定義在樣式文件中；
2.免去起名煩惱 我們經(jīng)常會(huì)因?yàn)槠鹈鵁?#xff0c;之前也嘗試過各種css命名方法，包括BEM,然而當(dāng)html層級(jí)嵌套比較深的情況下，BEM命名法也會(huì)有起名難，不直觀的缺陷
3.避免樣式堆積 可以很好的避免你是樣式的堆積，不存在你是樣式類的不敢刪除問題，有效的減少CSS的體積
4.樣式隔離 天然的支持組件間的樣式隔離，沒有自定義的css也就無需擔(dān)心組件之間樣式的影響。

默認(rèn)單位

默認(rèn)單位是rem, 1rem = 16px;