You're looking at the documentation for Tailwind CSS v2.
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.



By default, only responsive variants are generated for mix-blend-mode utilities.

You can control which variants are generated for the mix-blend-mode utilities by modifying the mixBlendMode property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

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


If you don't plan to use the mix-blend-mode utilities in your project, you can disable them entirely by setting the mixBlendMode property to false in the corePlugins section of your config file:

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