Разделение ширины

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

​Добавить границы между горизонтальными дочерними элементами

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

<div class="grid grid-cols-3 divide-x">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​Добавить границы между сложенными дочерними элементами

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

<div class="grid grid-cols-1 divide-y">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​Изменение порядка детей

Если ваши элементы расположены в обратном порядке (например, flex-row-reverse или flex-col-reverse), используйте утилиты divide-x-reverse или divide-y-reverse, чтобы убедиться, что граница добавлен к правильной стороне каждого элемента.

<div class="flex flex-col-reverse divide-y divide-y-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

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

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

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

<div class="divide-y divide-gray-400 hover:divide-y-8">
  <!-- ... -->
</div>

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

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

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

<div class="divide-y divide-gray-400 md:divide-y-8">
  <!-- ... -->
</div>

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

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

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

Шкала ширины разделения по умолчанию наследует свои значения из шкалы borderWidth, поэтому, если вы хотите настроить свои значения как для ширины границы, так и для ширины разделения, используйте раздел theme.borderWidth в файле tailwind.config.js.

module.exports = {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '6': '6px',
      '8': '8px',
    }
  }
}

Чтобы настроить только значения ширины разделения, используйте раздел theme.divideWidth вашего файла tailwind.config.js.

module.exports = {
  theme: {
    divideWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '6': '6px',
      '8': '8px',
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

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

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

<div class="divide-x-[3px]">
  <!-- ... -->
</div>

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