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

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

Класс	Свойства
ring-0	box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-1	box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-2	box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring	box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-4	box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-8	box-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}, чтобы применить сплошную тень блока определенной толщины к элементу. По умолчанию кольца имеют полупрозрачный синий цвет, аналогичный стилю кольца фокусировки по умолчанию во многих системах.

<button class="... ring-0">ring-0</button>
<button class="... ring-2">ring-2</button>
<button class="... ring">ring</button>
<button class="... ring-4">ring-4</button>

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

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

Фокус колец

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

<button class="... focus:outline-none focus:ring-4 focus:ring-green-500 focus:ring-opacity-50">
  Кнопка
</button>

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

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

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

<button class="... ring-4 ring-pink-300">
  По умолчанию
</button>

<button class="... ring-4 ring-pink-300 ring-inset">
  Встроенно
</button>

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

Чтобы контролировать ширину кольца в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите ширины кольца. Например, используйте md:ring-4, чтобы применить утилиту ring-4 только при средних размерах экрана и выше.

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

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

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

Чтобы настроить, какие утилиты ширины кольца будут генерироваться, добавьте свои собственные значения под ключом ringWidth в разделе theme вашего файла tailwind.config.js. Вы можете использовать клавишу DEFAULT, чтобы указать, какая ширина используется для простой утилиты ring.

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

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

Варианты

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

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

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

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

Отключение

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

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