Windi CSS和Tailwind CSS以及UnoCSS_unocss windicss-CSDN博客

本文链接：https://blog.csdn.net/qq_53280805/article/details/132537881

本文介绍了在Vue3项目中遇到的关于WindiCSS的奇特写法，一种让div高度自动适应的技巧。文章详细讲述了WindiCSS如何通过扫描HTML和CSS提供快速开发工具，以及其与TailwindCSS的对比，重点阐述了原子化CSS的开发效率、命名便利、样式管理和组件隔离的优点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

 <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文件打包的大小与加载速度上有很大的提升。

基本用法

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的优势

1.提高开发效率利用原子化框架提供的预设原子类，在少量样式编写上可以极大的提高开发效率，不需要单独定义在样式文件中；
2.免去起名烦恼我们经常会因为起名而烦恼，之前也尝试过各种css命名方法，包括BEM,然而当html层级嵌套比较深的情况下，BEM命名法也会有起名难，不直观的缺陷
3.避免样式堆积可以很好的避免你是样式的堆积，不存在你是样式类的不敢删除问题，有效的减少CSS的体积
4.样式隔离天然的支持组件间的样式隔离，没有自定义的css也就无需担心组件之间样式的影响。