Краткая справка

Класс
Свойства
divide-x-0 > * + *border-right-width: 0px; border-left-width: 0px;
divide-x-2 > * + *border-right-width: 0px; border-left-width: 2px;
divide-x-4 > * + *border-right-width: 0px; border-left-width: 4px;
divide-x-8 > * + *border-right-width: 0px; border-left-width: 8px;
divide-x > * + *border-right-width: 0px; border-left-width: 1px;
divide-y-0 > * + *border-top-width: 0px; border-bottom-width: 0px;
divide-y-2 > * + *border-top-width: 2px; border-bottom-width: 0px;
divide-y-4 > * + *border-top-width: 4px; border-bottom-width: 0px;
divide-y-8 > * + *border-top-width: 8px; border-bottom-width: 0px;
divide-y > * + *border-top-width: 1px; border-bottom-width: 0px;
divide-y-reverse > * + *--tw-divide-y-reverse: 1;
divide-x-reverse > * + *--tw-divide-x-reverse: 1;

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

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

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

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

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

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

01
02
03
<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, чтобы убедиться, что граница добавлен к правильной стороне каждого элемента.

01
02
03
<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.

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.

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>

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