Tailwind CSS `mix-blend-mode` utilities

Usage no npm install needed!

<script type="module">
  import neojpTailwindcssMixBlendModeUtilities from 'https://cdn.skypack.dev/@neojp/tailwindcss-mix-blend-mode-utilities';


A utility-first CSS framework for rapidly building custom user interfaces.

Tailwind CSS mix-blend-mode utilities

This is a Tailwind CSS plugin that adds utilities to set how an element's content should blend with the element underneath using the property mix-blend-mode.

Maintained by: Joan Piedra@neojp


Install as a node module with either npm or yarn on your command line

# Install via npm
npm install --save-dev @neojp/tailwindcss-mix-blend-mode-utilities

# Install via yarn
yarn add --dev @neojp/tailwindcss-mix-blend-mode-utilities

Add this module as a plugin on your Tailwind configuration file (tailwind.config.js).

module.exports = {
  plugins: [


Note that this plugin allows the usage of variants through the key mixBlendMode and will default to your global variant setting.

module.exports = {
  variants: {
    mixBlendMode: ['responsive']


Use the Tailwind utility classes provided by this plugin.

<div class="blend-color-burn"></div>
<div class="blend-color-dodge"></div>
<div class="blend-color"></div>
<div class="blend-darken"></div>
<div class="blend-difference"></div>
<div class="blend-exclusion"></div>
<div class="blend-hard-light"></div>
<div class="blend-hue"></div>
<div class="blend-lighten"></div>
<div class="blend-luminosity"></div>
<div class="blend-multiply"></div>
<div class="blend-overlay"></div>
<div class="blend-saturation"></div>
<div class="blend-screen"></div>
<div class="blend-soft-light"></div>
<div class="blend-normal"></div>


Tailwind will be outputed as follows.

.blend-color { mix-blend-mode: color; }
.blend-color-burn { mix-blend-mode: color-burn; }
.blend-color-dodge { mix-blend-mode: color-dodge; }
.blend-darken { mix-blend-mode: darken; }
.blend-difference { mix-blend-mode: difference; }
.blend-exclusion { mix-blend-mode: exclusion; }
.blend-hard-light { mix-blend-mode: hard-light; }
.blend-hue { mix-blend-mode: hue; }
.blend-lighten { mix-blend-mode: lighten; }
.blend-luminosity { mix-blend-mode: luminosity; }
.blend-multiply { mix-blend-mode: multiply; }
.blend-overlay { mix-blend-mode: overlay; }
.blend-saturation { mix-blend-mode: saturation; }
.blend-screen { mix-blend-mode: screen; }
.blend-soft-light { mix-blend-mode: soft-light; }
.blend-normal { mix-blend-mode: normal; }


Feel free to submit an issue or a pull request, and send me a message on Twitter (@neojp) about it.


This project has been licensed under the Hippocratic License.