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

Класс
Свойства
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-{width}, чтобы применить сплошную тень блока определенной толщины к элементу. По умолчанию кольца имеют полупрозрачный синий цвет, аналогичный стилю кольца фокусировки по умолчанию во многих системах.

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>

Кольцевые утилиты красиво сочетаются с обычными утилитами shadow-{size} и могут быть объединены в одном элементе.

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

Фокус колец

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

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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:ring-4 to only apply the ring-4 utility on hover.

<div class="ring-2 hover:ring-4">
  <!-- ... -->
</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:ring-4 to apply the ring-4 utility at only medium screen sizes and above.

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

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


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

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

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

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

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

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

If you need to use a one-off ring value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

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

Learn more about arbitrary value support in the arbitrary values documentation.