Tailwind CSS vs windicss

 

Tailwind CSS 和 windicss 都是基于 utility-first 的 CSS 框架，它们有着相似的设计原则和使用方法。但是它们也有一些不同之处：

1. 文档和社区支持：Tailwind CSS 拥有强大的文档和社区支持，而 windicss 的文档和社区相对较小。这意味着使用 Tailwind CSS 更容易找到帮助和解决问题。

2. 可定制性：Tailwind CSS 提供了很多可配置的选项，使得用户可以根据自己的需求定制化框架。而 windicss 则更加依赖于默认配置，因此在使用上可能会有一些限制。

3. 性能：Tailwind CSS 运行速度相对较快，尤其是在使用了 JIT 模式之后。而 windicss 则需要一些额外的配置才能达到较好的性能表现。

综上所述，Tailwind CSS 是一个更加成熟和流行的框架，拥有更好的文档和社区支持，同时也更加定制化。但是对于一些特定的使用场景，windicss 也是一个不错的选择。

Tailwind CSS

Tailwind CSS中文官网go

 

windicss

中文官网go

vscode插件:WindiCSS IntelliSense

 

示例：

<template>
    <ul class="flex items-center px-4 h-[100px]">
        <li class="menu-item" :class="'menu-item-active''"></li>
    </ul>
</template>
<style scoped>
  .menu-item{
    transition: all 0.2s;
    @apply mr-1 px-1 py-1 cursor-pointer  rounded hover:(bg-blue-50 text-blue-700) active:(!bg-blue-100)
  }
  .menu-item-active{
    @apply !bg-blue-100 !text-blue-600
  }
</style>
  

class="flex items-center px-4 h-[100px]" 

.flex {
    display: flex;
}
.items-center {
    align-items: center;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.h-\[100px\] {
    height: 100px;
}

 

.menu-item{
    transition: all 0.2s;
    @apply mr-1 px-1 py-1 cursor-pointer rounded hover:(bg-blue-50 text-blue-700) active:(!bg-blue-100)
}
.menu-item-active{
    @apply !bg-blue-100 !text-blue-600
}
/*等于*/
.menu-item {
    transition: all 0.2s;
    border-radius: 0.25rem;
    cursor: pointer;
    margin-right: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.menu-item:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(239, 246, 255, var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgba(29, 78, 216, var(--tw-text-opacity));
}
.menu-item:active {
    --tw-bg-opacity: 1 !important;
    background-color: rgba(219, 234, 254, var(--tw-bg-opacity)) !important;
}
.menu-item-active{
    --tw-bg-opacity: 1 !important;
    background-color: rgba(219, 234, 254, var(--tw-bg-opacity)) !important;
    --tw-text-opacity: 1 !important;
    color: rgba(37, 99, 235, var(--tw-text-opacity)) !important;
}