npm package: @goldencomm/tailwind-plugin-mask
Description: ⚠️ This plugin is unnecessary for Tailwind CSS v4 and higher. See [Tailwind CSS documentation](https://tailwindcss.com/docs/mask-clip) for more information.
Latest version: 1.0.1

# @goldencomm/tailwind-plugin-mask

⚠️ This plugin is unnecessary for Tailwind CSS v4 and higher. See [Tailwind CSS documentation](https://tailwindcss.com/docs/mask-clip) for more information.

## Installation

Install the plugin from npm:

```bash
npm i -D @goldencomm/tailwind-plugin-mask
```

Then add the plugin to your `tailwind.config.js` file:

```js
module.exports = {
  theme: {
    // ..
  },
  plugins: [require("@goldencomm/tailwind-plugin-mask")],
};
```

## [Mask clip](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-clip)

Determine the area affected by a mask.

| Class               | Properties                  |
| ------------------- | --------------------------- |
| `mask-clip-content` | `mask-clip: 'content-box';` |
| `mask-clip-padding` | `mask-clip: 'padding-box';` |
| `mask-clip-border`  | `mask-clip: 'border-box';`  |
| `mask-clip-fill`    | `mask-clip: 'fill-box';`    |
| `mask-clip-stroke`  | `mask-clip: 'stroke-box';`  |
| `mask-clip-view`    | `mask-clip: 'view-box';`    |
| `mask-clip-none`    | `mask-clip: 'no-clip';`     |

## [Mask composite](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite)

The compositing operation used on the mask layer with the layers below it.

| Class                      | Properties                     |
| -------------------------- | ------------------------------ |
| `mask-composite-add`       | `mask-composite: 'add';`       |
| `mask-composite-subtract`  | `mask-composite: 'subtract';`  |
| `mask-composite-intersect` | `mask-composite: 'intersect';` |
| `mask-composite-exclude`   | `mask-composite: 'exclude';`   |

## [Mask image](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image)

The image that is used as a mask layer for an element.

There are no default mask image utility classes included.

You can customize your theme by updating the `theme.maskImage` or `theme.extend.maskImage` spaces in your `tailwind.config.js` file.

```js
module.exports = {
  theme: {
    extend: {
      maskImage: {
        "fade-at-bottom": "linear-gradient(to bottom, black, transparent)",
      },
    },
  },
};
```

If this example mask image were added to your tailwind config, you could use it with the `mask-fade-at-bottom` class.

## [Mask mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-mode)

Determine if the mask-image is treated as a luminance or alpha mask.

| Class                    | Properties                   |
| ------------------------ | ---------------------------- |
| `mask-mode-alpha`        | `mask-mode: 'alpha';`        |
| `mask-mode-luminance`    | `mask-mode: 'luminance';`    |
| `mask-mode-match-source` | `mask-mode: 'match-source';` |

## [Mask origin](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-origin)

Set the origin of a mask.

| Class                 | Properties                    |
| --------------------- | ----------------------------- |
| `mask-origin-content` | `mask-origin: 'content-box';` |
| `mask-origin-padding` | `mask-origin: 'padding-box';` |
| `mask-origin-border`  | `mask-origin: 'border-box';`  |
| `mask-origin-fill`    | `mask-origin: 'fill-box';`    |
| `mask-origin-stroke`  | `mask-origin: 'stroke-box';`  |
| `mask-origin-view`    | `mask-origin: 'view-box';`    |

## [Mask position](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-position)

Set the initial position, relative to the mask position layer set by `mask-origin`, for the `mask-image`.

| Class               | Properties                       |
| ------------------- | -------------------------------- |
| `mask-bottom`       | `mask-position: 'bottom';`       |
| `mask-center`       | `mask-position: 'center';`       |
| `mask-left`         | `mask-position: 'left';`         |
| `mask-left-bottom`  | `mask-position: 'left bottom';`  |
| `mask-left-top`     | `mask-position: 'left top';`     |
| `mask-right`        | `mask-position: 'right';`        |
| `mask-right-bottom` | `mask-position: 'right bottom';` |
| `mask-right-top`    | `mask-position: 'right top';`    |
| `mask-top`          | `mask-position: 'top';`          |

You can customize your theme by updating the `theme.maskPosition` or `theme.extend.maskPosition` spaces in your `tailwind.config.js` file.

```js
module.exports = {
  theme: { extend: { maskPosition: { "bottom-4": "center bottom 1rem" } } },
};
```

## [Mask repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-repeat)

Sets how mask images are repeated.

| Class               | Properties                  |
| ------------------- | --------------------------- |
| `mask-repeat`       | `mask-repeat: 'repeat';`    |
| `mask-no-repeat`    | `mask-repeat: 'no-repeat';` |
| `mask-repeat-x`     | `mask-repeat: 'repeat-x';`  |
| `mask-repeat-y`     | `mask-repeat: 'repeat-y';`  |
| `mask-repeat-round` | `mask-repeat: 'round';`     |
| `mask-repeat-space` | `mask-repeat: 'space';`     |

## [Mask size](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-size)

Specifies the size of the mask images.

| Class          | Properties            |
| -------------- | --------------------- |
| `mask-auto`    | `mask-size: auto;`    |
| `mask-cover`   | `mask-size: cover;`   |
| `mask-contain` | `mask-size: contain;` |

You can customize your theme by updating the `theme.maskSize` or `theme.extend.maskSize` spaces in your `tailwind.config.js` file.

```js
module.exports = { theme: { extend: { maskSize: { 16: "4rem" } } } };
```

## [Mask type](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-type)

Sets whether an SVG `<mask>` element is used as a luminance or an alpha mask.

| Class                 | Properties              |
| --------------------- | ----------------------- |
| `mask-type-luminance` | `mask-type: luminance;` |
| `mask-type-alpha`     | `mask-type: alpha;`     |