Tailwind Divide

Tailwind提供了以.devide-为前缀的工具类用于控制父级容器中子类之间的分割线，分割线工具类分为三类分别是宽度、颜色、透明度。分割线工具类需添加在父级容器中，才能显示出子类之间的分割线。

分割线宽度（divide width）

分割线宽度以像素为单位，并辅以顶边和左边两个方位。

工具类	属性
divide-x	border-left-width:1px;
divide-y	border-top-width:1px;
divide-x-reverse	--divide-x-reverse:1;
divide-y-reverse	--divide-y-reverse:1;
divide-x-0	border-left-width:0;
divide-x-2	border-left-width:2px;
divide-x-4	border-left-width:4px;
divide-x-8	border-left-width:8px;
divide-y-0	border-top-width:0;
divide-y-2	border-top-width:2px;
divide-y-4	border-top-width:4px;
divide-y-8	border-top-width:8px;

例如：为子类添加分割线

divide

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container mx-auto my-4 p-4">
  <div class="grid grid-cols-3 divide-x divide-gray-400 text-center border mb-4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="divide-y divide-gray-400 text-center border">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

分割线颜色（divide color）

工具类	属性
divide-transparent	border-color:transparent;
divide-current	border-color:currentColor;
divide-black	border-color:#000;
divide-white	border-color:#fff;

分割线透明度（divide opacity）

工具类	属性
divide-opacity-0	--divide-opacity:0;
divide-opacity-25	--divide-opacity:0.25;
divide-opacity-50	--divide-opacity:0.5;
divide-opacity-75	--divide-opacity:0.75;
divide-opacity-100	--divide-opacity:1