import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; export const title = "border-spacing"; export const description = "Utilities for controlling the spacing between table borders."; ", "border-spacing: calc(var(--spacing) * );"], ["border-spacing-()", "border-spacing: var();"], ["border-spacing-[]", "border-spacing: ;"], ["border-spacing-x-", "border-spacing: calc(var(--spacing) * ) var(--tw-border-spacing-y);"], ["border-spacing-x-()", "border-spacing: var() var(--tw-border-spacing-y);"], ["border-spacing-x-[]", "border-spacing: var(--tw-border-spacing-y);"], ["border-spacing-y-", "border-spacing: var(--tw-border-spacing-x) calc(var(--spacing) * );"], ["border-spacing-y-()", "border-spacing: var(--tw-border-spacing-x) var();"], ["border-spacing-y-[]", "border-spacing: var(--tw-border-spacing-x) ;"], ]} /> ## Examples ### Basic example Use `border-spacing-` utilities like `border-spacing-2` and `border-spacing-x-3` to control the space between the borders of table cells with [separate borders](/docs/border-collapse#separating-table-borders):

{

State	City
Indiana	Indianapolis
Ohio	Columbus
Michigan	Detroit

} ```html

State	City
Indiana	Indianapolis
Ohio	Columbus
Michigan	Detroit

``` ### Using a custom value ### Responsive design ## Customizing your theme