Контур (Outline)

Классы для контура элементов — в основном для фокуса и доступности.

Ширина

Класс	Описание
.outline-none	Без контура
.outline-0d5 … .outline-9	Толщина контура (из шкалы sizing)

Цвет

Цвета палитры: .outline-primary, .outline-blue-300, .outline-gray-500 и т.д.

Стиль

Класс	Описание
.outline-style--solid	Сплошной
.outline-style--dashed	Пунктир
.outline-style--dotted	Точки

Смещение

.outline-offset-1 … .outline-offset-10, отрицательные: .-outline-offset-1 и т.д.

Примеры

Просмотр

outline-2

outline-none

dashed

Код

<div class="flex gap-4 flex-wrap">
  <button
    class="px-4 py-2 bg-blue-500 text-white rounded outline-2 outline-blue-300"
  >
    <p>outline-2</p>
  </button>
  <button class="px-4 py-2 bg-gray-200 rounded outline-none">
    <p>outline-none</p>
  </button>
  <button
    class="px-4 py-2 bg-gray-200 rounded outline-2 outline-style--dashed outline-gray-400"
  >
    <p>dashed</p>
  </button>
</div>

<button class="outline-2 outline-blue-300">Фокус</button>
<button class="outline-none">Без контура</button>
<button class="outline-2 outline-style--dashed outline-gray-400">Пунктир</button>