opacity

Примеры

Базовый пример

Используйте утилиты opacity-<number> такие как opacity-25 и opacity-100 для установки прозрачности элемента:

<button class="bg-indigo-500 opacity-100 ..."></button><button class="bg-indigo-500 opacity-75 ..."></button><button class="bg-indigo-500 opacity-50 ..."></button><button class="bg-indigo-500 opacity-25 ..."></button>

Применение условно

Префикс an opacity утилиты с вариантом, например disabled:*, чтобы применить утилиту только в этом состоянии:

<input class="opacity-100 disabled:opacity-75 ..." type="text" />

Подробнее об использовании вариантов читайте в документации по вариантам.

Использование пользовательского значения

Используйте синтаксис opacity-[<value>] , чтобы задать opacity на основе полностью пользовательского значения:

<button class="opacity-[.67] ...">  <!-- ... --></button>

Для переменных CSS вы также можете использовать синтаксис: opacity-(<custom-property>)

<button class="opacity-(--my-opacity) ...">  <!-- ... --></button>

Это просто сокращение, opacity-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс an opacity утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<button class="opacity-50 md:opacity-100 ...">  <!-- ... --></button>

Подробнее об использовании вариантов читайте в документации по вариантам.