PluginStatstailwindcss-blend-mode weekly downloads statistics
By hacknug (7 listings) · npm · Tailwind plugins
Blend-mode utilities for Tailwind CSS.
tailwindcss-blend-mode has 296 recorded weekly downloads on npm, an increase of 63.5% over the past 30 days, ranking #1621 of 2,322 tracked listings.
About tailwindcss-blend-mode
Tailwind CSS Blend Mode Plugin
This plugin adds utilities to use blend-modes with Tailwind CSS.
Installation
Add this plugin to your project:
# Install using pnpm
pnpm install --save-dev tailwindcss-blend-mode
# Install using npm
npm install --save-dev tailwindcss-blend-mode
# Install using yarn
yarn add -D tailwindcss-blend-mode
Usage
// tailwind.config.js
{
theme: {}, // no options to configure
variants: { // all the following default to ['responsive']
mixBlendMode: ['responsive'],
backgroundBlendMode: ['responsive'],
isolation: ['responsive'],
},
plugins: [
require('tailwindcss-blend-mode'), // no options to configure
],
}
.blend-normal { mix-blend-mode: normal; }
.blend-multiply { mix-blend-mode: multiply; }
.blend-screen { mix-blend-mode: screen; }
.blend-overlay { mix-blend-mode: overlay; }
.blend-darken { mix-blend-mode: darken; }
.blend-lighten { mix-blend-mode: lighten; }
.blend-color-dodge { mix-blend-mode: color-dodge; }
.blend-color-burn { mix-blend-mode: color-burn; }
.blend-hard-light { mix-blend-mode: hard-light; }
.blend-soft-light { mix-blend-mode: soft-light; }
.blend-difference { mix-blend-mode: difference; }
.blend-exclusion { mix-blend-mode: exclusion; }
.blend-hue { mix-blend-mode: hue; }
.blend-saturation { mix-blend-mode: saturation; }
.blend-color { mix-blend-mode: color; }
.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; }
.isolation-isolate { isolation: isolate; }
.isolation-auto { isolation: auto; }
Description from the npm listing.
- plugin
- tailwind
- tailwind css
- tailwindcss
- tailwindcss-plugin
README badge
Show your rank in a README or on your website. The badge updates automatically.
Charts
Images: 30d · 1y · all time · 1600×900 dark
Adoption over time
7/30/90-day growth
Ranking history
Listing placement
Listing placement
Filled points are observed values; hollow points come from Internet Archive snapshots of the listing page. Dashed segments span periods with no observations — values between points are not interpolated.
Each band is one page of 20. Weekly downloads on a linear scale. Placement is projected from weekly downloads, so it can differ from the marketplace's own sort order. Hover a dot to see the listing.
Recent observations
Full history (122)Similar npm Tailwind plugins plugins
All 20 tailwindcss-blend-mode alternatives- 242 weekly downloads-14.2%
Data source
Weekly downloads (trailing 7 complete days) come from the official npm downloads API. Downloads include CI and mirrors and are not equivalent to installs or users. npm publishes no ratings.
Listing: https://www.npmjs.com/package/tailwindcss-blend-mode. First seen Oct 16, 2026; last successful collection Oct 20, 2026. See the methodology.