@pyncz/tailwind-mask-image

A mask-image plugin for Tailwind CSS.

---

Install

Install the package with your preferred package-manager.
``pnpm install @pyncz/tailwind-mask-image`

After that, simply add the plugin into your tailwind.config.js:

`js // tailwind.config.js module.exports = { // ... plugins: [ // ... require('@pyncz/tailwind-mask-image') ], }`

`Usage`

`mask-image`

There are 3 default values the maskutility can accept: -linear-radial-none

`$3`

Applies a linear-gradient as the mask image. Opacity is set from 100% at the start to 0% at the end, by default.

`html


!mask-linear example

#### Direction mask-dir

By default, the gradient is directed to bottom. You can easily customize the direction with mask-dir utility, including arbitrary values.

`html


!mask-dir example
#### Opacity Stops

The stops API is similar to tailwind's Gradient Color Stops core utils, so you can customize your linear mask in a familiar way.

But! An important difference is that here you should use not colors but opacity values.

The opacity values are taken from your theme specified in the tailwind.config.js, but you obviously can use arbitrary opacity values as well.

`html


!mask-linear stops' example
> Note
> You don't have to specify all the stops, because the default values (100% for the start and 0% for the end point) still work.
##### Stops positions

In addition to setting the opacity of the stops, you can also set the position using mask-point.

`html


!stops' points example
This utility don't accept any default value, so use arbitrary values.
$3

Applies a radial-gradient as the mask image. Like for the mask-linear util, the gradient is spread from 100% opacity at the center to 0% at the ending shape.

`html


!mask-radial example

#### Shape mask-shape

Shape of the gradient, ellipse (by default) or circle.

`html


!mask-shape example

#### Position mask-at

By default, the gradient's position is center. You can use the same values as for the background-position css prop (top, bottom left etc), as well as arbitrary values with explicit position.

`html


!mask-at example

#### Reach mask-reach

With this util you can specify the size of the gradient.

`html


!mask-reach example

Besides as-they-are keyword-values, there are also a couple of aliases: -mask-reach-contain for closest-side-mask-reach-cover for farthest-corner

You can also use arbitrary values:

`html


!example for mask-reach with arbitrary values
#### Stops

> Note > The opacity stops formask-radial are the same as the ones described for mask-linear, including points API.

`html


!mask-radial stops' example

$3

This value matches mask-image css prop's default value so it makes no sense to use it separately, but it may be pretty useful if you apply the mask responsively.

`html


!mask-none example

$3
#### Images

The mask-image css prop accepts not only gradients but images as well. You can use arbitrary values, for example, to apply url() as the mask image.

`html


!arbitrary mask image example
#### Gradients

You can pass other types of the gradients, e.g. conic-gradient etc.

`html


!arbitrary conic-gradient mask example

Also, you may want not to use the API above even for linear-gradient or radial-gradient so you can pass them arbitrarily too.

`html



mask-size

`html


!mask size example

mask-position

`html


!mask position example

mask-repeat

You can manage the mask-repeat css propertyas well with the following utilities: -mask-repeat-mask-repeat-x-mask-repeat-y-mask-repeat-space-mask-repeat-round-mask-no-repeat

`html

``
!mask-repeat example