Параметры по умолчаниюlink

https://dev.ru.simai.io/ru/ui/utility/outline/outline-default.php

В большинстве случаев будет использоваться внешняя граница (outline) с параметрами по умолчанию. Для упрощения добавлены два модификатора: один для установки внешней границы, другой — для её удаления. Стили по этим модификаторам должны загружаться до других модификаторов внешней границы, чтобы их можно было переопределить при необходимости.

Таблица классовlink

Класс	Значение
.outline	outline: var(`--sf-px`) var(`--sf-outline-variant`) solid;
.outline-none	outline-width: var(`--sf-0`);

Описаниеlink

Модификаторы outline и outline-none задают параметры внешней границы по умолчанию.

outline — добавляет внешнюю границу со стандартной толщиной и цветом.
outline-none — убирает внешнюю границу, оставляя элементы без обводки.

Данные модификаторы могут сочетаться с другими модификаторами для внешней границы, а также поддерживают адаптивность и состояние при наведении (hover).

Синтаксисlink

Использование: {контрольная точка}:{модификатор} или просто {модификатор}

Контрольная точка (необязательный параметр):
Позволяет применять модификатор с определённого размера экрана (sm, md, lg, xl).
Модификатор (обязательный параметр):
- outline — добавляет внешнюю границу по умолчанию.
- outline-none — убирает внешнюю границу.

Пример использованияlink

<div class="outline p-2">
    Элемент с внешней границей по умолчанию
</div>

<div class="outline-none p-2">
    Элемент без внешней границы
</div>

Адаптивностьlink

Для изменения внешней границы на разных размерах экрана добавьте префикс контрольной точки:

<div class="sm:outline-none p-2">
    <!-- На экранах от Small и больше внешняя граница будет убрана -->
    Элемент
</div>

Для изменения внешней границы при наведении используйте hover:

<div class="outline hover:outline-none p-2">
    <!-- При наведении внешняя граница будет убрана -->
    Элемент
</div>