tgm
tailwind-gradient-mask-image
npm i tailwind-gradient-mask-image
tgm

tailwind-gradient-mask-image

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

by Juhana Jauhiainen

1.0.0 (see all)License:MITTypeScript:Not Found
npm i tailwind-gradient-mask-image
Readme

Gradient Mask plugin for Tailwind CSS

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

Try it out in Tailwind CSS Playground

MDN docs on mask-image

Installation

With npm

npm install tailwind-gradient-mask-image

With yarn

yarn add tailwind-gradient-mask-image

Configuration

Add the plugin to your tailwind.config.js

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

Usage

<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

.class {
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1.0) 0%, transparent 100%);
}

Variations

Direction shorthands

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

Downloads/wk

1.1K

GitHub Stars

17

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
1.0.0
latest
1yr ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate