border-spacing

用於控制表格邊框之間間距的通用類別。

Class Styles

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(--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-(<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: 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(--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-(<custom-property>)

border-spacing: var(--tw-border-spacing-x) var(<custom-property>);

border-spacing-y-[<value>]

border-spacing: var(--tw-border-spacing-x) <value>;

範例（Examples）

基本範例（Basic example）

使用 border-spacing-2 和 border-spacing-x-3 等 border-spacing-<number> 通用類別來控制具有分離邊框的表格儲存格邊框之間的間距：

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）

使用 border-spacing-[<value>] 語法，根據完全自訂的值來設定 border spacing：

<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() 函式。

響應式設計（Responsive design）

在 border-spacing 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

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

在變體文件中了解更多關於使用變體的資訊。

自訂你的主題（Customizing your theme）

border-spacing-<number> 通用類別由 --spacing 主題變數驅動，可以在你自己的主題中自訂：

@theme {  --spacing: 1px; }

在主題變數文件中了解更多關於自訂間距比例的資訊。