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

Mix Blend Mode

Tailwind CSS version

Utilities for controlling how an element should blend with the background.

Default class reference

mix-blend-normalmix-blend-mode: normal;
mix-blend-multiplymix-blend-mode: multiply;
mix-blend-screenmix-blend-mode: screen;
mix-blend-overlaymix-blend-mode: overlay;
mix-blend-darkenmix-blend-mode: darken;
mix-blend-lightenmix-blend-mode: lighten;
mix-blend-color-dodgemix-blend-mode: color-dodge;
mix-blend-color-burnmix-blend-mode: color-burn;
mix-blend-hard-lightmix-blend-mode: hard-light;
mix-blend-soft-lightmix-blend-mode: soft-light;
mix-blend-differencemix-blend-mode: difference;
mix-blend-exclusionmix-blend-mode: exclusion;
mix-blend-huemix-blend-mode: hue;
mix-blend-saturationmix-blend-mode: saturation;
mix-blend-colormix-blend-mode: color;
mix-blend-luminositymix-blend-mode: luminosity;


Use the mix-blend-{mode} utilities to control how an element’s content should be blended with the background.

<div class="bg-green-300 ...">
  <div class="mix-blend-multiply bg-amber-300 ..."></div>


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

<div class="mix-blend-multiply md:mix-blend-overlay ...">
  <!-- ... -->

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



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

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

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

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


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

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