TailwindCSS Image Mask Plugin

The TailwindCSS Image Mask Plugin is a custom plugin that extends TailwindCSS with utilities for applying image masks using CSS gradients. With this plugin, you can easily create image masks with different directions and gradient styles.

#Installation

To use this plugin, you need to install it via pnpm, npm or yarn.

#Using pnpm

pnpm add @designbycode/tailwindcss-mask-image

#Using npm

npm install @designbycode/tailwindcss-mask-image

#Using yarn

yarn add @designbycode/tailwindcss-mask-image

#Usage

Once the plugin is installed, you can enable it in your TailwindCSS configuration file. Usually, this file is named tailwind.config.js.

module.exports = {
  // ...other configurations
  plugins: [
    // ...other plugins
    require("@designbycode/tailwindcss-mask-image"),
  ],
};

#Utilities

The plugin generates several utility classes for applying image masks using CSS gradients. You can use these utility classes to easily apply masks to any element in your HTML.

#Applying Image Masks

To make it work you only need to add the class of .mask-image-{value} to you html. The rest off the classes is just modifiers.

<div class="mask-image-r"></div>

You can apply image masks by using the following utility classes:

#Default Values

The plugin sets some default CSS variables in the :root element, which define the default values for the color and direction of the image masks.

#Changing Gradient Starting and Ending Points

You can dynamically change the starting and ending points of the gradient using the following utility classes:

• .mask-image-start-0 to .mask-image-start-100: Changes the --mask-image-start variable to the specified percentage value.

• .mask-image-end-0 to .mask-image-end-100: Changes the --mask-image-end variable to the specified percentage value.

<div class="mask-image-b mask-image-start-25 mask-image-end-75"></div>

#Available percentage values for --mask-image-start and --mask-image-end:

#Configuration

The plugin allows you to customize the gradient steps and directions by modifying the theme object in your TailwindCSS configuration file.

// tailwind.config.js

module.exports = {
  // ...other configurations
  plugins: [
    // ...other plugins
    require("@designbycode/tailwindcss-mask-image"),
  ],
  theme: {
    imageMaskSteps: {
      // Add your custom gradient steps here
      0: "0%",
      10: "10%",
      25: "25%",
      // ...
    },
    imageMaskDirections: {
      // Add your custom mask directions here
      t: "to top",
      b: "to bottom",
      // ...
    },
  },
};

#Example

Here's an example of how you can use the utility classes to apply image masks:

<div class="mask-image-t mask-image-start-30 mask-image-end-70">
  <!-- Your content here -->
</div>

Note New to v2. Start and end color opacity

#Opacity for start and end Color

You can set the opacity for start and end color for more control over the mask.

<div class="mask-image-t mask-image-start-opacity-50 mask-image-end-opacity-70">
  <!-- Your content here -->
</div>

#Contributing

Contributions to this plugin are welcome! If you encounter any issues, have feature requests, or want to improve the plugin, feel free to create a pull request or submit an issue on the GitHub repository.

#Contributors

#License

This project is licensed under the MIT License - see the LICENSE file for details.

#Acknowledgments

• This plugin is inspired by the needs of web developers using TailwindCSS.
• Special thanks to the TailwindCSS team for creating such an amazing framework.