Windi CSS 使用@apply实现样式抽离

当我们使用 Windi CSS 编写样式时，直接将样式写在类中，当样式数量较多时，代码就会变得冗长臃肿，例如以下代码：

<div class="text-3xl font-bold text-black m-2">
   <div class="border-2  p-4 bg-yellow-300">111</div>
   <div class="border--2 p-4 bg-red-300">222</div>
</div>

 这种情况下，我们可以使用 @apply 来抽离出样式，以提高代码的可读性和维护性，具体如下所示：

<div class="box">
   <div class="div1">111</div>
   <div class="div2">222</div>
</div>


<style>
.box{
    @apply text-3xl font-bold text-black m-2;
}

.div1, .div2{
    @apply border-2  p-4;
}

.div1{
    @apply bg-yellow-300;
}

.div2{
    @apply bg-red-300;
}
</style>

两段代码得到的结果是相同的，但是使用 @apply 可以让代码更加简洁、易于维护和扩展。使用 @apply 技术，我们可以将样式的定义和使用分离开来，在样式定义处进行修改和扩展，而不需要修改每个使用该样式的类。这样可以有效地避免代码重复和冗长，提高代码的可读性和可维护性。