@goldencomm/tailwind-plugin-mask

Installation

Install the plugin from npm:

npm i -D @goldencomm/tailwind-plugin-mask

Then add the plugin to your tailwind.config.js file:

module.exports = {
  theme: {
    // ..
  },
  plugins: [require("@goldencomm/tailwind-plugin-mask")],
};

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

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

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.

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

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

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

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.

module.exports = {
  theme: {
    extend: {
      maskPosition: {
        "bottom-4": "center bottom 1rem",
      },
    },
  },
};

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

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.

module.exports = {
  theme: {
    extend: {
      maskSize: {
        16: "4rem",
      },
    },
  },
};

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; |