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

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

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

介紹

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

對比

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

默認單位

默認單位是rem, 1rem = 16px;