Границы
Утилиты для управления стилем границ элемента.
| Class | Styles |
|---|---|
border-solid | border-style: solid; |
border-dashed | border-style: dashed; |
border-dotted | border-style: dotted; |
border-double | border-style: double; |
border-hidden | border-style: hidden; |
border-none | border-style: none; |
divide-solid | & > :not(:last-child) {
border-style: solid;
} |
divide-dashed | & > :not(:last-child) {
border-style: dashed;
} |
divide-dotted | & > :not(:last-child) {
border-style: dotted;
} |
divide-double | & > :not(:last-child) {
border-style: double;
} |
divide-hidden | & > :not(:last-child) {
border-style: hidden;
} |
divide-none | & > :not(:last-child) {
border-style: none;
} |
Используйте утилиты вроде border-solid и border-dotted для управления стилем границы элемента:
border-solid
border-dashed
border-dotted
border-double
<div class="border-2 border-solid ..."></div><div class="border-2 border-dashed ..."></div><div class="border-2 border-dotted ..."></div><div class="border-4 border-double ..."></div>Используйте утилиту border-none для удаления существующей границы элемента:
<button class="border-none ...">Save Changes</button>Чаще всего это используется для удаления стиля границы, который был применен на меньшем брейкпоинте.
Используйте такие утилиты, как divide-dashed и divide-dotted, для управления стилем границы между дочерними элементами:
<div class="grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500"> <div>01</div> <div>02</div> <div>03</div></div>Префикс a border-style утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="border-solid md:border-dotted ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.