Фильтр фона

Применение

Используйте утилиту backdrop-filter для включения фоновых фильтров (в сочетании с другими утилитами фоновых фильтров, например, backdrop-blur или backdrop-grayscale), и утилиту backdrop-filter-none для удаления фильтров.

<div class="backdrop-filter backdrop-grayscale backdrop-blur-md backdrop-contrast-200 ...">
  <!-- ... -->
</div>

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

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

<div class="backdrop-filter backdrop-blur-lg md:backdrop-filter-none ...">
  <!-- ... -->
</div>

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

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

Варианты

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

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

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

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

Отключение

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

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