Windicss

中文文档 ：完成性存疑

英文文档

tailwindcss中文文档：Tailwind是一个Postcss插件，可以和Sass，Less，Stylus 或其他预处理器一起使用。但是不建议与其他预处理器一起用。因为使用Tailwind的项目，css很少，所以预处理器没啥用武之地。

可以在class上用hover:bg-purple-700定义hover的样式，这是内联样式做不到的。tailwindcss的核心概念如下图所示。

<button class="bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 ...">

tailwindcss英文文档

 

windicss 是以 Tailwindcss 为灵感制作的库，windicss更快、兼容性更好、使用 Typescript 构建，他们解决的问题是类似的。

如果您已经熟悉Tailwind CSS，请考虑使用Windi CSS作为它的替代方案。 它提供了更快的加载时间，并与Tailwind v2.0完全兼容，并具有更多功能。

为什么选择Windi CSS：

当我的项目变大并且包含大约数十个组件时，初始编译时间达到了3s，而热更新花费了超过1s。

 

一、Windi Css是什么？

对于我来说Windi Css是一个可以让我们快速上手开发的一个组件库，他里面包含了几乎所有的css样式，可以让我们不需要再去繁琐的写css样式，原来几行的css现在只需要短短的几个字符。他的许多新特性给我们带来了极大的方便，并且他给我们带来了更快的加载体验。

<template>
  <view class="relative bg-white h-full p-10px mt-30px">
    <!--    这是windi Css样式的手法写的一个盒模型-->
    <view class="flex justify-center p-10px text-18px m-15px bg-hex-F2F2F2">
      <text class="text-hex-C75450">这里是第一个盒子</text>
      <text class="text-hex-5188BA ml-5px">这里是第二行文字</text>
    </view>
    <!--    这是标准Css手法写的第二个盒模型-->
    <view class="view">
      <text class="text0">这里是第二个盒子</text>
      <text class="text1">这里是第二行文字</text>
    </view>
  </view>
</template>
<style>
.view {
  display: flex;
  justify-content: center;
  padding: 10px;
  font-size: 18px;
  margin: 15px;
  background-color: #F2F2F2;
}
.text0 {

color: #C75450;

}
.text1 {

color: #5188BA;

margin-left: 5px;

}

</style>

运行效果如图