home chevron_right
Разделитель

Цвет разделителяlink

divider-colorhover

Утилиты цвета задают цвет линии разделителя между соседними элементами.

Таблица классовlink

Класс Значение
.divider-transparent / .divide-transparent border-color: var(--sf-transparent)
.divider-current / .divide-current border-color: currentColor
.divider-outline / .divide-outline border-color: var(--sf-outline)
.divider-primary / .divide-primary border-color: var(--sf-outline-primary)
.divider-secondary / .divide-secondary border-color: var(--sf-outline-secondary)
.divider-tertiary / .divide-tertiary border-color: var(--sf-outline-tertiary)
.divider-error / .divide-error border-color: var(--sf-outline-error)
.divider-warning / .divide-warning border-color: var(--sf-outline-warning)
.divider-success / .divide-success border-color: var(--sf-outline-success)
.hover:divider-* Цвет разделителя при :hover

Примерlink

<div class="grid grid-col-3 divider-x-1 divider-primary hover:divider-error">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Playgroundlink