outline-width

Примеры

Базовый пример

Используйте утилиты outline или outline-<number> такие как outline-2 и outline-4 для установки ширины контура элемента:

<button class="outline outline-offset-2 ...">Кнопка A</button><button class="outline-2 outline-offset-2 ...">Кнопка B</button><button class="outline-4 outline-offset-2 ...">Кнопка C</button>

Применение при фокусе

Префикс an outline-width утилиты с вариантом, например focus:*, чтобы применить утилиту только в этом состоянии:

<button class="outline-offset-2 outline-sky-500 focus:outline-2 ...">Сохранить изменения</button>

Подробнее об использовании вариантов читайте в документации по вариантам.

Использование пользовательского значения

Используйте синтаксис outline-[<value>] , чтобы задать outline width на основе полностью пользовательского значения:

<div class="outline-[2vw] ...">  <!-- ... --></div>

Для переменных CSS вы также можете использовать синтаксис: outline-(length:<custom-property>)

<div class="outline-(length:--my-outline-width) ...">  <!-- ... --></div>

Это просто сокращение, outline-[length:var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс an outline-width утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="outline md:outline-2 ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.