border-spacing

Utilities for controlling the spacing between table borders.

Quick reference

Class	Styles
border-spacing-<number>	border-spacing: calc(var(--spacing) * <number>);
border-spacing-(<custom-property>)	border-spacing: var(<custom-property>);
border-spacing-[<value>]	border-spacing: <value>;
border-spacing-x-<number>	border-spacing: calc(var(--spacing) * <number>) var(--baro-border-spacing-y);
border-spacing-x-(<custom-property>)	border-spacing: var(<custom-property>) var(--baro-border-spacing-y);
border-spacing-x-[<value>]	border-spacing: <value> var(--baro-border-spacing-y);
border-spacing-y-<number>	border-spacing: var(--baro-border-spacing-x) calc(var(--spacing) * <number>);
border-spacing-y-(<custom-property>)	border-spacing: var(--baro-border-spacing-x) var(<custom-property>);
border-spacing-y-[<value>]	border-spacing: var(--baro-border-spacing-x) <value>;

Examples

Basic example

Use border-spacing-<number> utilities like border-spacing-2 and border-spacing-x-3 to control the space between the borders of table cells with separate borders:

State	City
Indiana	Indianapolis
Ohio	Columbus
Michigan	Detroit

<table class="border-separate border-spacing-2 border border-gray-400 dark:border-gray-500">
  <thead>
    <tr>
      <th class="border border-gray-300 dark:border-gray-600">State</th>
      <th class="border border-gray-300 dark:border-gray-600">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-300 dark:border-gray-700">Indiana</td>
      <td class="border border-gray-300 dark:border-gray-700">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-gray-300 dark:border-gray-700">Ohio</td>
      <td class="border border-gray-300 dark:border-gray-700">Columbus</td>
    </tr>
    <tr>
      <td class="border border-gray-300 dark:border-gray-700">Michigan</td>
      <td class="border border-gray-300 dark:border-gray-700">Detroit</td>
    </tr>
  </tbody>
</table>

Using a custom value

Use the border-spacing-[<value>] syntax to set the border spacing based on a completely custom value:

<table class="border-spacing-[7px] ...">
  <!-- ... -->
</table>

For CSS variables, you can also use the border-spacing-(<custom-property>) syntax:

<table class="border-spacing-(--my-border-spacing) ...">
  <!-- ... -->
</table>

This is just a shorthand for border-spacing-[var(<custom-property>)] that adds the var() function for you automatically.

Responsive design

Prefix a border-spacing utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<table class="border-spacing-2 md:border-spacing-4 ...">
  <!-- ... -->
</table>

Customizing your theme

The border-spacing-<number> utilities are driven by the --spacing theme variable, which can be customized in your own theme: