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

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

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

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

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

outline

outline-dashed

outline-dotted

outline-double

<button class="outline outline-2  outline-offset-2 ...">Кнопка А</button>
<button class="outline-dashed outline-2 outline-offset-2 ...">Кнопка Б</button>
<button class="outline-dotted outline-2 outline-offset-2 ...">Кнопка В</button>
<button class="outline-double outline-3 outline-offset-2 ...">Кнопка Г</button>

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

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

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

Focus the input to see the expected behaviour

<input type="text"
  placeholder="Default focus style"
  class="..." />

<input type="text"
  placeholder="Custom focus style"
  class="focus:outline-none focus:ring focus:border-blue-500 ..." />

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


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

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:outline-dashed to only apply the outline-dashed utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

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

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:outline-dashed to apply the outline-dashed utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.