Border Spacing - Tailwindcss

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.";

<ApiTable rows={[ ["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

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:

<Figure> <Example padding={false}> { <div className="px-4 py-8 sm:px-8"> <table className="w-full border-separate border-spacing-2 border border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800"> <thead className="bg-gray-50 dark:bg-gray-700"> <tr> <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> State </th> <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200"> City </th> </tr> </thead> <tbody> <tr> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Indiana </td> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Indianapolis </td> </tr> <tr> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">Ohio</td> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Columbus </td> </tr> <tr> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Michigan </td> <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Detroit </td> </tr> </tbody> </table> </div> } </Example>

html

<!-- [!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>

</Figure>

Using a custom value

Responsive design

Customizing your theme