Got a list? Want to add borders in between in each item? You can do that really quickly using TailwindCSS's divide-* utility.
It works similarly to something like this:
<ul>
<li class="border-t ...">...</li>
<li class="border-t ...">...</li>
<li class="border-t ...">...</li>
<li class="border-t ...">...</li>
<li class="border-t ...">...</li>
<li class="border-t ...">...</li>
</ul>Except, you don't have to repeat yourself and define each border manually, instead just do:
<ul class="divide-y divide-white>
<li class="...">...</li>
<li class="...">...</li>
<li class="...">...</li>
<li class="...">...</li>
<li class="...">...</li>
<li class="...">...</li>
</ul>You can also do divide-x, which will add borders in between items going from left-to-right.
If you want to add spacing in between the borders then you'll need to supply a padding to each child element in the list (either horizontal or vertical depending on which way you're dividing)
You can change the divide color by using any of TailwindCSS's native colors with the divide-* utility.
There's also a few styles you can use to change up how the bordering looks. Try using divide-dashed, divide-dotted, or divide-double for more intersting border effects.
