# tailwind-gradient-mask-image

> A plugin for Tailwind CSS for masking elements using mask-image and linear-gradient.

Latest version **1.2.0** (published 2024-02-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwind-gradient-mask-image
pnpm add tailwind-gradient-mask-image
yarn add tailwind-gradient-mask-image
bun add tailwind-gradient-mask-image
```

## 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.2.0 |
| Published | 2024-02-04 |
| First published | 2020-11-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 70 |
| Author | Juhana Jauhiainen |
| Maintainers | juhanakristian |
| Keywords | tailwind, tailwindcss, css, mask |

## Links

- npm: https://www.npmjs.com/package/tailwind-gradient-mask-image
- Repository: https://github.com/juhanakristian/tailwind-gradient-mask-image
- Homepage: https://github.com/juhanakristian/tailwind-gradient-mask-image#readme
- Issues: https://github.com/juhanakristian/tailwind-gradient-mask-image/issues
- npm.io page: https://npm.io/package/tailwind-gradient-mask-image

## 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.2.0 (latest) — 2024-02-04
- 1.1.0 — 2023-10-29
- 1.0.0 — 2021-08-04
- 0.2.0 — 2020-11-07
- 0.1.0 — 2020-11-03
- 0.0.1 — 2020-11-02

## README

# Gradient Mask plugin for Tailwind CSS

Tailwind CSS plugin for adding `mask-image` with a `linear-gradient` on a HTML element.

<img src="screenshot.png" width="400">

Try it out in [Tailwind CSS Playground](https://play.tailwindcss.com/ZAQrbYa3wH)

[MDN docs on mask-image](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image)

## Installation

With npm
```bash
npm install tailwind-gradient-mask-image
```

With yarn
```bash
yarn add tailwind-gradient-mask-image
```

## Configuration

Add the plugin to your `tailwind.config.js`

```js
{
    plugins: [require("tailwind-gradient-mask-image")]
}
```

## Usage

```html
<div class="gradient-mask-t-0">
    ...
</div>
```

The plugin creates classes with prefix `gradient-mask-`. After the prefix follows a direction shorthand and the gradient start percentage.

The class above matches the css
```css
.class {
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1.0) 0%, transparent 100%);
}
```

> Using `gradient-mask-none` will set the CSS property to `mask-image: none`. This can be used in combination of breakpoints for device-specific behaviors

## Variations

Direction shorthands
```js
{
  t: "to top",
  tr: "to top right",
  r: "to right",
  br: "to bottom right",
  b: "to bottom",
  bl: "to bottom left",
  l: "to left",
  tl: "to top left",
} 
```

The gradient start percentages go from 0% to 100% with 10% gaps.


## Arbitrary values

You can use arbitrary values to specify unique steps towards a specific direction

```html
<div class="gradient-mask-t-[transparent,rgba(0,0,0,1.0)_30px,rgba(0,0,0,0.5)_40%]">
    ...
</div>
```

The class above matches the following css

```css
.class {
    mask-image: linear-gradient(to top, transparent, rgba(0,0,0,1.0) 30px, rgba(0,0,0,0.5) 40%, transparent 100%)
}
```

> A transparent at 100% will always be set to keep a specific direction
>
> You can always add `transparent_80%` at the end of your abitrary value to have the last 20% fully masked

---
_Source: https://npm.io/package/tailwind-gradient-mask-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._