原子化css的使用

固定宽度：class="w-240px"  class="w-10rem"

百分比宽度：class="w-full" class="w-1/2"

字体大小：class="text-10px" class="text-1rem"

字体颜色：

　　　　<span class="text-red">红色文字</span> 

　　　　<span class="text-red-100">浅红100</span> 

　　　　<span class="text-gray-100">浅灰100</span> 

　　　　<span class="text-primary">主要颜色</span>

　　　　<span class="text-secondary">次要颜色</span>

　　　　<span class="text-success">成功颜色</span>

　　　　<span class="text-warning">警告颜色</span>

　　　　<span class="text-error">错误颜色</span>

　　　　<span class="text-info">信息颜色</span> 

　　　　<span class="text-transparent">透明颜色</span>

字体加粗：

　　　　<span class="font-thin">细体 (100)</span>

　　　　<span class="font-extralight">Extra Light (200)</span>

　　　　<span class="font-light">Light (300)</span>

　　　　<span class="font-normal">正常 (400)</span>

　　　　<span class="font-medium">中等 (500)</span>

　　　　<span class="font-semibold">半粗体 (600)</span>

　　　　<span class="font-bold">粗体 (700)</span>

　　　　<span class="font-extrabold">Extra Bold (800)</span>

　　　　<span class="font-black">黑色 (900)</span>

背景色：

　　　　<div class="bg-red">红色背景</div>

　　　　<div class="bg-green">绿色背景</div>

　　　　<div class="bg-blue">蓝色背景</div>

　　　　<div class="bg-primary">主要颜色背景</div>

　　　　<div class="bg-success">成功颜色背景</div>

　　　　 <div class="bg-warning">警告颜色背景</div>

　　　　<div class="bg-error">错误颜色背景</div>

　　　　<div class="bg-info">信息颜色背景</div>

flex布局：

　　　　<div class="flex">行内flex布局</div>

　　　　<div class="inline-flex">行内flex布局</div>

　　　　<!-- 主轴方向 -->

　　　　<div class="flex-row">主轴为水平方向（默认）</div>

　　　　<div class="flex-row-reverse">主轴为水平反向</div>

　　　　<div class="flex-col">主轴为垂直方向</div>

　　　　<div class="flex-col-reverse">主轴为垂直反向</div>

　　　　<!-- 换行设置 -->

　　　　<div class="flex-wrap">允许换行</div>

　　　　<div class="flex-nowrap">不允许换行（默认）</div>

　　　　<div class="flex-wrap-reverse">反向换行</div>