windicss使用

最新推荐文章于 2024-11-19 16:31:40 发布

waterkid0

最新推荐文章于 2024-11-19 16:31:40 发布

阅读量1.2k

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_36022463/article/details/130956534

版权

WindiCSS是一个CSS框架，它提供了基于约束的API，确保颜色、间距、布局和阴影等的规范性。该框架能自动删除未使用的CSS代码，生成的代码量小且响应式设计无需额外的媒体查询。它支持hover和focus状态，以及使用@apply指令来复用CSS代码。例如，通过.btn类应用样式，可以实现按钮的背景色、文字色、边距和圆角，并在hover和focus时改变效果。

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

和 Tailwind css 类似： css原子类框架

优点：

基于约束 : api约束，让我们在颜色，间距，板式，阴影等有一定约束，而不是使用任意的颜色值样式，让网页更具有规范性
代码量最小，自动删除未使用的css代码，最终生成css代码可能是最小的
响应式设计，，不必再写媒体查询css，，而是在原子类前面加上 sm，md，lg 等这些前缀
支持hover 和 focus 状态，，悬停和点击效果
@apply指令，，将css代码声明到下面
…

  <button class="btn" >button</button>
<style scoped>
.btn{
  @apply bg-purple-500 text-indigo-50 px-4 py-2  rounded-full hover:(bg-purple-900) transition-all duration-500
  focus:(ring-8 ring-purple-900);
}
</style>