Расстояние между границами

​Основное использование

​Настройка интервала между границами

Используйте утилиты border-spacing-*, border-spacing-x-* и border-spacing-y-* для управления пространством между границами ячеек таблицы с разделенными границами.

<table class="border-separate border-spacing-2 border border-slate-400 ...">
  <thead>
    <tr>
      <th class="border border-slate-300 ...">State</th>
      <th class="border border-slate-300 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-slate-300 ...">Indiana</td>
      <td class="border border-slate-300 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-slate-300 ...">Ohio</td>
      <td class="border border-slate-300 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-slate-300 ...">Michigan</td>
      <td class="border border-slate-300 ...">Detroit</td>
    </tr>
  </tbody>
</table><table class="border-separate border-spacing-2 border border-slate-500 ...">
  <thead>
    <tr>
      <th class="border border-slate-600 ...">State</th>
      <th class="border border-slate-600 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-slate-700 ...">Indiana</td>
      <td class="border border-slate-700 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-slate-700 ...">Ohio</td>
      <td class="border border-slate-700 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-slate-700 ...">Michigan</td>
      <td class="border border-slate-700 ...">Detroit</td>
    </tr>
  </tbody>
</table>

​Применение условно

​Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:border-spacing-2, чтобы применять утилиту border-spacing-2 только при hover.

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

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:border-spacing-4, чтобы применить утилиту border-spacing-4 только на экранах среднего размера и выше.

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

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.

​Использование пользовательских значений

​Настройка вашей темы

По умолчанию утилиты для расстановки границ Tailwind используют масштаб расстояний по умолчанию. Вы можете настроить шкалу интервалов, отредактировав theme.spacing или theme.extend.spacing в файле tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
      }
    }
  }
}

В качестве альтернативы вы можете настроить только шкалу интервалов между границами, отредактировав theme.borderSpacing или theme.extend.borderSpacing в вашем файле tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      borderSpacing: {
        '13': '3.25rem',
      },
    }
  }
}

Узнайте больше о настройке темы по умолчанию в документации настройка темы.

​Произвольные значения

Если вам нужно использовать одноразовое border-spacing, которое не имеет смысла включать в вашу тему, используйте квадратные скобки для создания свойства на лету с использованием любого произвольного значения.

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

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.