Домашняя страница Tailwind CSS
  1. Границы
  2. Стиль контура

Краткая справка

Класс
Свойства
outline-noneoutline: 2px solid transparent; outline-offset: 2px;
outlineoutline-style: solid;
outline-dashedoutline-style: dashed;
outline-dottedoutline-style: dotted;
outline-doubleoutline-style: double;

Основы использования

Настройка стиля контура

Используйте утилиты outline-{style}, чтобы изменить стиль контура элемента.

outline

outline-dashed

outline-dotted

outline-double

<button class="outline outline-2 outline-offset-2 ...">Кнопка A</button>
<button class="outline-dashed outline-2 outline-offset-2 ...">Кнопка B</button>
<button class="outline-dotted outline-2 outline-offset-2 ...">Кнопка C</button>
<button class="outline-double outline-3 outline-offset-2 ...">Кнопка D</button>

Удаление контуров

Используйте outline-none, чтобы скрыть контур браузера по умолчанию на выделенных элементах.

Настоятельно рекомендуется применять собственные стили фокуса для обеспечения доступности при использовании этой утилиты.

Сфокусируйте ввод, чтобы увидеть ожидаемое поведение

<input type="text"
  placeholder="Стиль фокуса по умолчанию"
  class="..." />

<input type="text"
  placeholder="Пользовательский стиль фокусировки"
  class="focus:outline-none focus:ring focus:border-blue-500 ..." />

Утилита outline-none реализована с использованием прозрачного контура под капотом, чтобы гарантировать, что элементы по-прежнему визуально сфокусированы на режим высокой контрастности Windows пользователей.

Применяя условно

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:outline-dashed, чтобы применять утилиту outline-dashed только при hover.

<div class="outline hover:outline-dashed">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:outline-dashed, чтобы применить утилиту outline-dashed только на экранах среднего размера и выше.

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

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.