border-spacing

Ejemplos

Ejemplo básico

Usa utilidades border-spacing-<number> como border-spacing-2 y border-spacing-x-3 para controlar el espacio entre los bordes de las celdas de la tabla con bordes separados:

<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">Estado</th>
      <th class="border border-gray-300 dark:border-gray-600">Ciudad</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>

Usando un valor personalizado

Usa la sintaxis border-spacing-[<value>] para establecer el border spacing basado en un valor completamente personalizado:

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

Para variables CSS, también puedes usar la sintaxis border-spacing-(<custom-property>) :

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

Esto es solo un atajo para border-spacing-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Diseño Responsive

Prefija una utilidad border-spacing con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.

Personalizando tu tema

Las utilidades border-spacing-<number> son impulsadas por la variable de tema --spacing, la cual puede ser personalizada en tu propio tema:

@theme {
  --spacing: 1px; 
}

Aprende más sobre la personalización de la escala de espaciado en la documentación de variables de tema.