Границы
Утилиты для управления стилем контура элемента.
| Class | Styles |
|---|---|
outline-solid | outline-style: solid; |
outline-dashed | outline-style: dashed; |
outline-dotted | outline-style: dotted; |
outline-double | outline-style: double; |
outline-none | outline-style: none; |
outline-hidden | outline: 2px solid transparent;
outline-offset: 2px; |
Используйте утилиты такие как outline-solid и outline-dashed для установки стиля контура элемента:
outline-solid
outline-dashed
outline-dotted
outline-double
<button class="outline-2 outline-offset-2 outline-solid ...">Кнопка A</button><button class="outline-2 outline-offset-2 outline-dashed ...">Кнопка B</button><button class="outline-2 outline-offset-2 outline-dotted ...">Кнопка C</button><button class="outline-3 outline-offset-2 outline-double ...">Кнопка D</button>Используйте утилиту outline-hidden для скрытия стандартного контура браузера на сфокусированных элементах, сохраняя при этом контур в режиме принудительных цветов:
Попробуйте эмулировать `forced-colors: active` в инструментах разработчика, чтобы увидеть поведение
<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />Настоятельно рекомендуется применять собственное стилизование фокуса для доступности при использовании этой утилиты.
Используйте утилиту outline-none для полного удаления стандартного контура браузера на сфокусированных элементах:
<div class="focus-within:outline-2 focus-within:outline-indigo-600 ..."> <textarea class="outline-none ..." placeholder="Оставьте комментарий..." /> <button class="..." type="button">Отправить</button></div>Настоятельно рекомендуется применять собственное стилизование фокуса для доступности при использовании этой утилиты.
Префикс an outline-style утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="outline md:outline-dashed ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.