Утилиты для настройки прозрачности контуров колец.
Используйте утилиты ring-opacity-{amount} для установки непрозрачности контура кольца.
<button class="... ring-4 ring-red-500 ring-opacity-50">
Кнопка
</button>Чтобы управлять прозрачностью кольца в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите прозрачности кольца. Например, используйте md:ring-opacity-50, чтобы применить утилиту ring-opacity-50 только при средних размерах экрана и выше.
<button class="ring-2 ring-blue-500 ring-opacity-75 md:ring-opacity-50">
<!-- ... -->
</button>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
Вы можете настроить, какие утилиты непрозрачности кольца будут генерироваться, настроив глобальную шкалу непрозрачности с помощью ключа opacity в разделе theme файла tailwind.config.js:
// tailwind.config.js
module.exports = {
theme: {
extend: {
opacity: {
+ '15': '0.15',
+ '35': '0.35',
+ '65': '0.65',
}
}
}
}Если вы хотите настроить только утилиты прозрачности кольца, не влияя на глобальную шкалу непрозрачности, используйте вместо этого ключ ringOpacity:
// tailwind.config.js
module.exports = {
theme: {
extend: {
ringOpacity: {
+ '15': '0.15',
+ '35': '0.35',
+ '65': '0.65',
}
}
}
}Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.
По умолчанию, только responsive, темный режим (если включен), focus-within и focus варианты создаются для утилит ring opacity.
Вы можете контролировать, какие варианты создаются для утилит ring opacity для изменения свойства ringOpacity в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и active:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ ringOpacity: ['hover', 'active'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения ring opacity, Вы можете полностью отключить их, установив для ringOpacity свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ ringOpacity: false,
}
}