Due to official support in the Tailwind's core, this package is no longer maintained.

Tailwind CSS Plugin – Blend Mode

Utilities for controlling blending mode behaviour.

Install

1. Install the plugin:

# Using npm
npm install @neupauer/tailwindcss-plugin-blend-mode

# Using Yarn
yarn add @neupauer/tailwindcss-plugin-blend-mode

2. Add it to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  // ...
  plugins: [require("@neupauer/tailwindcss-plugin-blend-mode")],
};

Configuration

// tailwind.config.js
module.exports = {
  variants: {
    // default
    blendMode: [],
  },
};

Available Utilities

Utility	Style
.isolate	isolation: isolate
.no-isolate	isolation: auto
.mix-blend-normal	mix-blend-mode: normal
.mix-blend-multiply	mix-blend-mode: multiply
.mix-blend-screen	mix-blend-mode: screen
.mix-blend-overlay	mix-blend-mode: overlay
.mix-blend-darken	mix-blend-mode: darken
.mix-blend-lighten	mix-blend-mode: lighten
.mix-blend-color-dodge	mix-blend-mode: color-dodge
.mix-blend-color-burn	mix-blend-mode: color-burn
.mix-blend-hard-light	mix-blend-mode: hard-light
.mix-blend-soft-light	mix-blend-mode: soft-light
.mix-blend-difference	mix-blend-mode: difference
.mix-blend-exclusion	mix-blend-mode: exclusion
.mix-blend-hue	mix-blend-mode: hue
.mix-blend-saturation	mix-blend-mode: saturation
.mix-blend-color	mix-blend-mode: color
.mix-blend-luminosity	mix-blend-mode: luminosity
.bg-blend-normal	background-blend-mode: normal
.bg-blend-multiply	background-blend-mode: multiply
.bg-blend-screen	background-blend-mode: screen
.bg-blend-overlay	background-blend-mode: overlay
.bg-blend-darken	background-blend-mode: darken
.bg-blend-lighten	background-blend-mode: lighten
.bg-blend-color-dodge	background-blend-mode: color-dodge
.bg-blend-color-burn	background-blend-mode: color-burn
.bg-blend-hard-light	background-blend-mode: hard-light
.bg-blend-soft-light	background-blend-mode: soft-light
.bg-blend-difference	background-blend-mode: difference
.bg-blend-exclusion	background-blend-mode: exclusion
.bg-blend-hue	background-blend-mode: hue
.bg-blend-saturation	background-blend-mode: saturation
.bg-blend-color	background-blend-mode: color
.bg-blend-luminosity	background-blend-mode: luminosity

Usage

<div class="bg-blend-hue"></div>
<div class="mix-blend-color"></div>
<div class="isolate mix-blend-darken"></div>