Skip to content
This repository has been archived by the owner on Apr 4, 2021. It is now read-only.

A Tailwind CSS plugin for controlling blending mode behaviour.

Notifications You must be signed in to change notification settings

neupauer/tailwindcss-plugin-blend-mode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
  1. 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>

About

A Tailwind CSS plugin for controlling blending mode behaviour.

Resources

Stars

Watchers

Forks

Packages