Непрозрачность кольца

Применение

Используйте утилиты ring-opacity-{amount} для установки непрозрачности контура кольца.

Адаптивность

Чтобы управлять прозрачностью кольца в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите прозрачности кольца. Например, используйте md:ring-opacity-50, чтобы применить утилиту ring-opacity-50 только при средних размерах экрана и выше.

<button class="ring-2 ring-blue-500 ring-opacity-75 md:ring-opacity-50">
  <!-- ... -->
</button>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

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

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        opacity: {
+         '15': '0.15',
+         '35': '0.35',
+         '65': '0.65',
        }
      }
    }
  }

Если вы хотите настроить только утилиты прозрачности кольца, не влияя на глобальную шкалу непрозрачности, используйте вместо этого ключ ringOpacity:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        ringOpacity: {
+         '15': '0.15',
+         '35': '0.35',
+         '65': '0.65',
        }
      }
    }
  }

Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.

Варианты

По умолчанию, только responsive, темный режим (если включен), focus-within и focus варианты создаются для утилит ring opacity.

Вы можете контролировать, какие варианты создаются для утилит ring opacity для изменения свойства ringOpacity в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и active:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       ringOpacity: ['hover', 'active'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения ring opacity, Вы можете полностью отключить их, установив для ringOpacity свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     ringOpacity: false,
    }
  }