Утилиты для имитации смещения при добавлении контурных колец.
Используйте утилиты ring-offset-{width} для имитации смещения, добавляя сплошную белую тень прямоугольника и увеличивая толщину сопутствующего кольца контура для соответствия смещению.
<button class="... ring ring-pink-600 ring-offset-0">ring-0</button>
<button class="... ring ring-pink-600 ring-offset-2">ring-2</button>
<button class="... ring ring-pink-600 ring-offset-4">ring-4</button>На самом деле вы не можете компенсировать тень блока в CSS, поэтому мы должны имитировать ее, используя сплошную цветную тень, которая соответствует цвету родительского фона. По умолчанию мы используем белый цвет, но если вы добавляете кольцевое смещение поверх другого цвета фона, вы должны использовать утилиты ring-offset-{color} для соответствия родительскому цвету фона:
bg-green-100
<div class="... bg-green-100">
<button class="... ring ring-green-600 ring-offset-4 ring-offset-green-100">
ring-offset-green-100
</button>
</div>Дополнительные сведения смотрите в документации ringOffsetColor.
Чтобы управлять шириной смещения кольца в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите ширины смещения кольца. Например, используйте md:ring-offset-4, чтобы применить утилиту ring-offset-4 только при средних размерах экрана и выше.
<button class="ring-2 ring-offset-2 md:ring-offset-4">
<!-- ... -->
</button>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
Чтобы настроить, какие утилиты ширины смещения кольца генерируются, добавьте свои пользовательские значения под ключом ringOffsetWidth в разделе theme файла tailwind.config.js.
// tailwind.config.js
module.exports = {
theme: {
extend: {
ringOffsetWidth: {
'3': '3px',
'6': '6px',
'10': '10px',
}
}
}
}Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.
По умолчанию, только responsive, focus-within и focus варианты создаются для утилит ring offset width.
Вы можете контролировать, какие варианты создаются для утилит ring offset width для изменения свойства ringOffsetWidth в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и active:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ ringOffsetWidth: ['hover', 'active'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения ring offset width, Вы можете полностью отключить их, установив для ringOffsetWidth свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ ringOffsetWidth: false,
}
}