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

Класс
Свойства
ring-0box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-1box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-2box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ringbox-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-4box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-8box-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-inset--tw-ring-inset: inset;

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

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

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

ring-2

ring

ring-4

<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-*.

Focus this button to see the ring appear

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

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

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

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

<button class="... ring-2 ring-pink-300 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.

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

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

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

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

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

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