# @neupauer/tailwindcss-plugin-blend-mode

> A Tailwind CSS plugin for controlling blending mode behaviour.

Latest version **1.0.0** (published 2021-02-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @neupauer/tailwindcss-plugin-blend-mode
pnpm add @neupauer/tailwindcss-plugin-blend-mode
yarn add @neupauer/tailwindcss-plugin-blend-mode
bun add @neupauer/tailwindcss-plugin-blend-mode
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-02-04 |
| First published | 2021-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Peter Neupauer |
| Maintainers | neupauer_peter |
| Keywords | tailwindcss, plugin, blend-mode, mix-blend-mode, background-blend-mode |

## Links

- npm: https://www.npmjs.com/package/@neupauer/tailwindcss-plugin-blend-mode
- Repository: https://github.com/neupauer/tailwindcss-plugin-blend-mode
- Homepage: https://github.com/neupauer/tailwindcss-plugin-blend-mode#readme
- Issues: https://github.com/neupauer/tailwindcss-plugin-blend-mode/issues
- npm.io page: https://npm.io/package/@neupauer/tailwindcss-plugin-blend-mode

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-02-04

## README

# Tailwind CSS Plugin – Blend Mode

Utilities for controlling blending mode behaviour.

## Install

1. Install the plugin:

```bash
# 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:

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

## Configuration

```js
// 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

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

---
_Source: https://npm.io/package/@neupauer/tailwindcss-plugin-blend-mode · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._