Just-in-Time: The Next Generation of Tailwind CSS
Tailwind CSS on GitHub

Background Blend Mode

Tailwind CSS version

Utilities for controlling how an element's background image should blend with its background color.

Default class reference

bg-blend-normalbackground-blend-mode: normal;
bg-blend-multiplybackground-blend-mode: multiply;
bg-blend-screenbackground-blend-mode: screen;
bg-blend-overlaybackground-blend-mode: overlay;
bg-blend-darkenbackground-blend-mode: darken;
bg-blend-lightenbackground-blend-mode: lighten;
bg-blend-color-dodgebackground-blend-mode: color-dodge;
bg-blend-color-burnbackground-blend-mode: color-burn;
bg-blend-hard-lightbackground-blend-mode: hard-light;
bg-blend-soft-lightbackground-blend-mode: soft-light;
bg-blend-differencebackground-blend-mode: difference;
bg-blend-exclusionbackground-blend-mode: exclusion;
bg-blend-huebackground-blend-mode: hue;
bg-blend-saturationbackground-blend-mode: saturation;
bg-blend-colorbackground-blend-mode: color;
bg-blend-luminositybackground-blend-mode: luminosity;


Use the bg-blend-{mode} utilities to control how an element’s background image should be blended its background color.

<div class="bg-blend-multiply ...">
  <!-- ... -->


To control the background-blend-mode property at a specific breakpoint, add a {screen}: prefix to any existing background-blend-mode utility. For example, use md:bg-blend-darken to apply the bg-blend-darken utility at only medium screen sizes and above.

<div class="bg-blend-lighten md:bg-blend-darken ...">
  <!-- ... -->

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.



默认情况下, 针对 background-blend-mode 功能类,只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 backgroundBlendMode 属性来控制为 background-blend-mode 功能生成哪些变体。

例如,这个配置将生成 hover and focus 变体:

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


如果您不打算在您的项目中使用 background-blend-mode 功能,您可以通过在配置文件的 corePlugins 部分将 backgroundBlendMode 属性设置为 false 来完全禁用它们:

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