@neupauer/tailwindcss-plugin-blend-mode NPM

Tailwind CSS Plugin – Blend Mode

Utilities for controlling blending mode behaviour.

Install

Install the plugin:

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

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

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>

tailwindcss plugin blend-mode mix-blend-mode background-blend-mode

@infinitebrahmanuniverse/nolb-_neu @everything-registry/sub-chunk-643 @zalastax/nolb-_neu

1.0.0

3 years ago