Границы
Утилиты для управления толщиной границ элемента.
Используйте утилиты border
, .border-0
, .border-2
, .border-4
или .border-8
, чтобы установить ширину границы для всех сторон элемента.
border
border-2
border-4
border-8
<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>
<div class="border border-sky-500"></div> <div class="border-2 border-sky-500"></div> <div class="border-4 border-sky-500"></div> <div class="border-8 border-sky-500"></div>
Используйте border-{side}
, .border-{side}-0
, .border-{side}-2
, .border-{side}-4
или .border-{side}-8
для установки ширины границы для одной стороны элемента.
border-t-4
border-r-4
border-b-4
border-l-4
<div class="border-t-4 border-indigo-500 ..."></div>
<div class="border-r-4 border-indigo-500 ..."></div>
<div class="border-b-4 border-indigo-500 ..."></div>
<div class="border-l-4 border-indigo-500 ..."></div>
Используйте утилиты border-{x|y}-{width}
для установки ширины границы с двух сторон элемента одновременно.
border-x-4
border-y-4
<div class="border-x-4 border-indigo-500 ..."></div>
<div class="border-y-4 border-indigo-500 ..."></div>
Вы также можете добавить границы между дочерними элементами с помощью утилит divide-{x/y}-{width}
и divide-{color}
.
<div class="divide-y divide-slate-200 ..."> <div>01</div> <div>02</div> <div>03</div> </div>
<div class="divide-y divide-slate-700 ..."> <div>01</div> <div>02</div> <div>03</div> </div>
Дополнительные сведения смотрите в документации Ширина разделения и Цвет разделения.
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:border-t-4
to only apply the border-t-4
utility on hover.
<div class="border-2 hover:border-t-4">
<!-- ... -->
</div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:border-t-4
to apply the border-t-4
utility at only medium screen sizes and above.
<div class="border-2 md:border-t-4">
<!-- ... -->
</div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
По умолчанию Tailwind предоставляет пять утилит border-width
, и такое же количество утилит на каждую сторону (горизонтальную, вертикальную, верхнюю, правую, нижнюю и левую). Вы изменяете, добавляете или удаляете их, редактируя раздел theme.borderWidth
в вашей конфигурации Tailwind.
module.exports = {
theme: {
borderWidth: {
DEFAULT: '1px',
'0': '0',
'2': '2px',
'3': '3px',
'4': '4px',
'6': '6px',
'8': '8px',
}
}
}
Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.
If you need to use a one-off border-{side}-{width}
value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<div class="border-t-[3px]">
<!-- ... -->
</div>
Learn more about arbitrary value support in the arbitrary values documentation.