Opacity — Tailwind CSS

Быстрый справочник

Класс	Свойства
opacity-0	opacity: 0;
opacity-5	opacity: 0.05;
opacity-10	opacity: 0.1;
opacity-20	opacity: 0.2;
opacity-25	opacity: 0.25;
opacity-30	opacity: 0.3;
opacity-40	opacity: 0.4;
opacity-50	opacity: 0.5;
opacity-60	opacity: 0.6;
opacity-70	opacity: 0.7;
opacity-75	opacity: 0.75;
opacity-80	opacity: 0.8;
opacity-90	opacity: 0.9;
opacity-95	opacity: 0.95;
opacity-100	opacity: 1;

Основное использование

Изменение прозрачности элемента

Управляйте прозрачностью элемента, используя утилиты opacity-{amount}.

<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>

Условное применение

Состояние наведения, фокуса и другие

Tailwind позволяет условно применять утилиты в различных состояниях с помощью модификаторов вариантов. Например, используйте hover:opacity-100 для применения утилиты opacity-100 только при наведении.

<div class="opacity-50 hover:opacity-100">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояний можно найти в документации Наведение, фокус и другие состояния.

Точки разрыва и медиа-запросы

Вы также можете использовать модификаторы вариантов для настройки медиа-запросов, таких как точки разрыва адаптивности, тёмный режим, предпочитаемые значения для уменьшения движения и многое другое. Например, используйте md:opacity-100 для применения утилиты opacity-100 только на экранах среднего и большего размера.

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

Дополнительную информацию можно найти в документации по Адаптивному дизайну, Тёмному режиму и другим модификаторам медиа-запросов.

Использование пользовательских значений

Настройка вашей темы

По умолчанию Tailwind предоставляет несколько утилит прозрачности для общего использования. Вы можете настроить эти значения, отредактировав theme.opacity или theme.extend.opacity в файле tailwind.config.js.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      opacity: {
        '67': '.67',
      }
    }
  }
}

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

Произвольные значения

Если вам нужно использовать разовое значение opacity, которое не имеет смысла включать в вашу тему, используйте квадратные скобки для динамического создания свойства с использованием любого произвольного значения.

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

Дополнительную информацию о поддержке произвольных значений можно найти в документации Произвольные значения.