Утилиты для управления непрозрачностью цвета границы элемента.
Управляйте непрозрачностью цвета границы элемента с помощью утилит border-opacity-{amount}.
<div class="border-4 border-light-blue-500 border-opacity-100 ..."></div>
<div class="border-4 border-light-blue-500 border-opacity-75 ..."></div>
<div class="border-4 border-light-blue-500 border-opacity-50 ..."></div>
<div class="border-4 border-light-blue-500 border-opacity-25 ..."></div>
<div class="border-4 border-light-blue-500 border-opacity-0 ..."></div>Чтобы управлять непрозрачностью цвета границы элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите непрозрачности цвета границы. Например, используйте md:border-opacity-50, чтобы применить утилиту border-opacity-50 только при средних размерах экрана и выше.
<div class="border-2 border-blue-500 border-opacity-75 md:border-opacity-50">
<!-- ... -->
</div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
Чтобы настроить значения непрозрачности сразу для всех утилит, связанных с непрозрачностью, используйте раздел opacity в конфигурации темы tailwind.config.js:
// tailwind.config.js
module.exports = {
theme: {
extend: {
opacity: {
+ '10': '0.1',
+ '20': '0.2',
+ '95': '0.95',
}
}
}
}Если вы хотите настроить только утилиты непрозрачности границы, используйте раздел borderOpacity:
// tailwind.config.js
module.exports = {
theme: {
extend: {
borderOpacity: {
+ '10': '0.1',
+ '20': '0.2',
+ '95': '0.95',
}
}
}
}Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.
По умолчанию, только responsive, темный режим (если включен), group-hover, focus-within, hover и focus варианты создаются для утилит border opacity.
Вы можете контролировать, какие варианты создаются для утилит border opacity для изменения свойства borderOpacity в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты active:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ borderOpacity: ['active'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения border opacity, Вы можете полностью отключить их, установив для borderOpacity свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ borderOpacity: false,
}
}