Утилиты для управления шириной границы между элементами.
Добавьте границы между горизонтальными элементами с помощью утилит divide-x-{amount}.
<div class="grid grid-cols-3 divide-x divide-green-500">
<div>1</div>
<div>2</div>
<div>3</div>
</div>Добавьте границы между составными элементами с помощью утилит divide-y-{amount}.
<div class="grid grid-cols-1 divide-y divide-yellow-500">
<div>1</div>
<div>2</div>
<div>3</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 divide-rose-400">
<div>1</div>
<div>2</div>
<div>3</div>
</div>Чтобы контролировать границы между элементами в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите разделения. Например, добавление к элементу класса md:divide-y-8 приведет к применению утилиты divide-y-8 при средних размерах экрана и выше.
<div class="divide-y divide-gray-400 md:divide-y-8">
<div class="py-2">1</div>
<div class="py-2">2</div>
<div class="py-2">3</div>
</div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
Шкала ширины разделения по умолчанию наследует свои значения из шкалы 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',
}
}
}Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.
По умолчанию, только responsive варианты создаются для утилит divide width.
Вы можете контролировать, какие варианты создаются для утилит divide width для изменения свойства divideWidth в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ divideWidth: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения divide width, Вы можете полностью отключить их, установив для divideWidth свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ divideWidth: false,
}
}