Divide Color

Basic usage

Setting the divide color

Control the border color between elements using the divide-{color} utilities.

<div className="**divide-y divide-blue-200**">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Changing the opacity

Control the opacity of the divide color using the color opacity modifier.

<div className="divide-y-4 divide-slate-400**/25** ...">
  <!-- ... -->
</div>

You can use any value defined in your opacity scale, or use arbitrary values if you need to deviate from your design tokens.

<div className="divide-y-4 divide-slate-400**/[.24]** ...">
  <!-- ... -->
</div>