border-spacing

用于控制表格边框间距的工具类。

快速参考

类	属性
border-spacing-<number>	border-spacing: calc(var(--spacing) * <number>);
border-spacing-px	border-spacing: 1px;
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(--tw-border-spacing-y);
border-spacing-x-px	border-spacing: 1px var(--tw-border-spacing-y);
border-spacing-x-(<custom-property>)	border-spacing: var(<custom-property>) var(--tw-border-spacing-y);
border-spacing-x-[<value>]	border-spacing: <value> var(--tw-border-spacing-y);
border-spacing-y-<number>	border-spacing: var(--tw-border-spacing-x) calc(var(--spacing) * <number>);
border-spacing-y-px	border-spacing: var(--tw-border-spacing-x) 1px;
border-spacing-y-(<custom-property>)	border-spacing: var(--tw-border-spacing-x) var(<custom-property>);
border-spacing-y-[<value>]	border-spacing: var(--tw-border-spacing-x) <value>;

示例

基础示例

使用 border-spacing-<number> 等工具类（如 border-spacing-2 和 border-spacing-x-3）来控制带分离边框的表格单元格边框之间的间距：

State	City
Indiana	Indianapolis
Ohio	Columbus
Michigan	Detroit

<!-- [!code classes:border-spacing-2] -->
<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>

使用自定义值

使用 border-spacing-[<value>] 等工具类，根据完全自定义的值设置边框间距：

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

对于 CSS 变量，也可以使用 border-spacing-(<custom-property>) 语法：

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

这只是 border-spacing-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体作为 border-spacing 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：

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

了解如何使用变体，请参阅变体文档。

自定义主题

border-spacing-<number> 工具类由 --spacing 主题变量驱动，你可以在自己的主题中自定义它：

@theme {
  --spacing: 1px;
}

了解如何自定义间距比例，请参阅主题变量文档。