Толщина кольца

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

​Добавление кольца

Используйте утилиту ring-*, чтобы применить к элементу сплошную тень определенной толщины. По умолчанию кольца имеют полупрозрачный синий цвет, аналогичный стилю кольца фокусировки по умолчанию во многих системах.

<button class="... ring-offset-2 ring-2">Кнопка A</button>
<button class="... ring-offset-2 ring">Кнопка B</button>
<button class="... ring-offset-2 ring-4">Кнопка C</button>

Утилиты Ring изящно компонуются с обычными утилитами shadow-* и могут комбинироваться в одном элементе.

Вы также можете управлять цветом, непрозрачностью и смещением колец с помощью утилит ringColor, ringOpacity и ringOffsetWidth.

​Фокус колец

Утилиты ширины кольца упрощают использование пользовательских колец фокусировки, добавляя focus: в начало любой утилиты ring-*.

<button class="... focus:ring-2">Сохранить изменения</button>

Вариант focus включен по умолчанию для утилит ringColor, ringOpacity, ringOffsetWidth и ringOffsetColor также.

​Внутренние кольца

Используйте утилиту ring-inset, чтобы кольцо отображалось внутри элемента, а не снаружи. Это может быть полезно для элементов на краю экрана, где часть кольца не была бы видна.

<button class="... ring-2 ring-pink-300 ring-inset">
  Сохранить изменения
</button><button class="... ring-2 ring-pink-500 ring-inset">
  Сохранить изменения
</button>

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

​Наведение, фокус и другие состояния

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

<div class="ring-2 hover:ring-4">
  <!-- ... -->
</div>

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

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

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

<div class="ring-2 md:ring-4">
  <!-- ... -->
</div>

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

​Использование пользовательских значений

​Настройка вашей темы

По умолчанию Tailwind включает в себя несколько утилит общего назначения ring-width. Вы можете настроить эти значения, отредактировав theme.ringWidth или theme.extend.ringWidth в вашем файле tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      ringWidth: {
        '10': '10px',
      }
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

​Произвольные значения

Если вам нужно использовать одноразовое ring, которое не имеет смысла включать в вашу тему, используйте квадратные скобки для создания свойства на лету с использованием любого произвольного значения.

<div class="ring-[10px]">
  <!-- ... -->
</div>

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.