Эффекты
Утилиты для управления прозрачностью элемента.
Class | Styles |
---|---|
opacity-<number> | opacity: <number>%; |
opacity-(<custom-property>) | opacity: var(<custom-property>); |
opacity-[<value>] | opacity: <value>; |
Используйте утилиты opacity-<number>
такие как opacity-25
и opacity-100
для установки прозрачности элемента:
opacity-100
opacity-75
opacity-50
opacity-25
<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>
Подробнее об использовании вариантов читайте в документации по вариантам.