Windi Css

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

二、代码演示
具体使用方法查阅windi 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>