Border Spacing

Utility	Properties
bs-0	border-spacing: 0rem;
bs-1	border-spacing: 0.25rem;
bs-2	border-spacing: 0.5rem;
bs-3	border-spacing: 0.75rem;
bs-4	border-spacing: 1rem;
bs-5	border-spacing: 1.25rem;
bs-6	border-spacing: 1.5rem;
bs-7	border-spacing: 1.75rem;
bs-8	border-spacing: 2rem;

This example sets the border spacing to 1rem. The space between the borders of adjacent table cells will be increased.

A	B
C	D

<table class="b-1 bc-indigo b-s bs-4 w-full">
  <tr>
    <td class="b-1 bc-indigo b-s p-4 ta-c tc-indigo">A</td>
    <td class="b-1 bc-indigo b-s p-4 ta-c tc-indigo">B</td>
  </tr>
  <tr>
    <td class="b-1 bc-indigo b-s p-4 ta-c tc-indigo">C</td>
    <td class="b-1 bc-indigo b-s p-4 ta-c tc-indigo">D</td>
  </tr>
</table>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

You can combine responsive breakpoints like sm:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports.

<div class="bs-1 md:bs-2 ..."></div>

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

<div class="bs-1 h:bs-2 ..."></div>