Деление по ширине

Быстрый справочник

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

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

Добавьте границы между горизонтальными элементами, используя утилиты divide-x-{width}.

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

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

Добавьте границы между сложенными элементами, используя утилиты divide-y-{width}.

<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 только при наведении.

<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-{x|y}-{width} значение, которое не имеет смысла включать в вашу тему, используйте квадратные скобки для динамического создания свойства с любым произвольным значением.

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

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