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