Контрастость фона

Применение

Используйте утилиты backdrop-contrast-{amount?} вместе с утилитой backdrop-filter, чтобы настроить контрастность фона.

<div class="backdrop-filter backdrop-contrast-125 ...">
  <!-- ... -->
</div>

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

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

<div class="backdrop-filter backdrop-contrast-110 md:backdrop-contrast-150 ...">
  <!-- ... -->
</div>

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

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

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

  // tailwind.config.js
  module.exports = {
    theme: {
+     extend: {
+       backdropContrast: {
+         25: '.25',
+       }
+     }
    }
  }

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

Backdrop Contrast Scale

You can customize the values for the backdrop-contrast filter in your Tailwind config.

  // tailwind.config.js
  module.exports = {
    theme: {
      backdropContrast: {
        0: '0',
+       25: '.25',
        50: '.5',
        75: '.75',
        100: '1',
        125: '1.25',
        150: '1.5',
        200: '2',
      }
    }
  }

Варианты

По умолчанию, только responsive варианты создаются для утилит backdrop contrast.

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

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

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

Отключение

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

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