Контур

Справочник классов по умолчанию

Класс	Свойства
outline-none	outline: 2px solid transparent; outline-offset: 2px;
outline-white	outline: 2px dotted white; outline-offset: 2px;
outline-black	outline: 2px dotted black; outline-offset: 2px;

Удалить контуры

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

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

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

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

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

Пунктирные контуры

Используйте утилиты outline-white и outline-black, чтобы добавить пунктирную границу 2 пикселя вокруг элемента со смещением 2 пикселя. Они полезны в качестве доступного пользовательского стиля фокуса общего назначения, если вы не хотите создавать свой собственный.

<button class="focus:outline-black ...">Кнопка А</button>
<button class="focus:outline-white ...">Кнопка Б</button>

Кастомизация

Контуры

По умолчанию Tailwind предоставляет три утилиты. Вы можете настроить их, отредактировав раздел theme.outline в файле tailwind.config.js.

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        outline: {
          blue: '2px solid #0000ff',
        }
      }
    }
  }

Вы также можете указать значение outline-offset для любых пользовательских утилит структуры, используя кортеж вида [outline, outlineOffset]:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        outline: {
          blue: ['2px solid #0000ff', '1px'],
        }
      }
    }
  }

Варианты

По умолчанию, только responsive, focus-within и focus варианты создаются для утилит outline.

Вы можете контролировать, какие варианты создаются для утилит outline для изменения свойства outline в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и active:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       outline: ['hover', 'active'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения outline, Вы можете полностью отключить их, установив для outline свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     outline: false,
    }
  }