Утилиты для управления непрозрачностью границ между элементами.
Управляйте непрозрачностью границ между элементами с помощью утилит divide-opacity-{amount}.
<div class="divide-y-4 divide-black divide-opacity-25">
<div>1</div>
<div>2</div>
<div>3</div>
</div>Чтобы контролировать непрозрачность границ между элементами в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите разделения непрозрачности. Например, используйте md:divide-opacity-50, чтобы применить утилиту divide-opacity-50 только при средних размерах экрана и выше.
<div class="divide-y-2 divide-blue-500 divide-opacity-75 md:divide-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',
}
}
}
}Если вы хотите настроить только утилиты непрозрачности разделения, используйте раздел divideOpacity:
// tailwind.config.js
module.exports = {
theme: {
extend: {
divideOpacity: {
+ '10': '0.1',
+ '20': '0.2',
+ '95': '0.95',
}
}
}
}Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.
По умолчанию, только responsive и темный режим (если включен) варианты создаются для утилит divide opacity.
Вы можете контролировать, какие варианты создаются для утилит divide opacity для изменения свойства divideOpacity в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ divideOpacity: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения divide opacity, Вы можете полностью отключить их, установив для divideOpacity свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ divideOpacity: false,
}
}