Утилиты для управления толщиной границ элемента.
Используйте утилиты border, .border-0, .border-2, .border-4 или .border-8, чтобы установить ширину границы для всех сторон элемента.
<div class="border-0 border-indigo-600 ..."></div>
<div class="border border-indigo-600 ..."></div>
<div class="border-2 border-indigo-600 ..."></div>
<div class="border-4 border-indigo-600 ..."></div>
<div class="border-8 border-indigo-600 ..."></div>Используйте border-{side}, .border-{side}-0, .border-{side}-2, .border-{side}-4 или .border-{side}-8 для установки ширины границы для одной стороны элемента.
<div class="border-t-2 border-fuchsia-600 ..."></div>
<div class="border-r-2 border-fuchsia-600 ..."></div>
<div class="border-b-2 border-fuchsia-600 ..."></div>
<div class="border-l-2 border-fuchsia-600 ..."></div>Вы также можете добавить границы между дочерними элементами с помощью утилит divide-{x/y}-{width} и divide-{color}.
Дополнительные сведения смотрите в документации Разделение ширины и Разделение цвета.
<div class="divide-y divide-light-blue-400 ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div></div>
</div>Чтобы контролировать ширину границы элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите ширины границы. Например, используйте md:border-t-4, чтобы применить утилиту border-t-4 только при средних размерах экрана и выше.
<div class="border-2 md:border-t-4 ..."></div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию Tailwind предоставляет пять утилит border-width и такое же количество утилит на каждой стороне (вверху, справа, внизу и слева). Вы изменяете, добавляете или удаляете их, редактируя раздел theme.borderWidth вашей конфигурации Tailwind. Значения в этом разделе также будут определять, какие утилиты будут сгенерированы стороной.
// tailwind.config.js
module.exports = {
theme: {
borderWidth: {
DEFAULT: '1px',
'0': '0',
'2': '2px',
+ '3': '3px',
'4': '4px',
+ '6': '6px',
- '8': '8px',
}
}
}По умолчанию, только responsive варианты создаются для утилит border width.
Вы можете контролировать, какие варианты создаются для утилит border width для изменения свойства borderWidth в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ borderWidth: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения border width, Вы можете полностью отключить их, установив для borderWidth свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ borderWidth: false,
}
}