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