A Tailwind CSS plugin that generates dynamic mask-image utilities based on backgroundImage.
npm install tailwind-mask-imageTailwind Mask Image body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; } h1, h2, h3 { color: #333; } code { background: #f4f4f4; padding: 2px 4px; border-radius: 4px; } pre { background: #f4f4f4; padding: 10px; border-radius: 4px; overflow-x: auto; }
Tailwind Mask Image
===================
A Tailwind CSS plugin that generates dynamic mask-image utilities based on backgroundImage. This plugin allows you to easily create and manage mask images within your Tailwind CSS projects.
Table of Contents
-----------------
* Installation
* Usage
* Available Utilities
* Configuration
* License
* Contributing
* Contact
Installation
------------
To install the plugin, run the following command in your project directory:
npm install tailwind-mask-image --save-dev
After installing, you need to include the plugin in your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
// Your theme configuration
},
plugins: [
require('tailwind-mask-image'),
],
}
Usage
-----
Once installed and configured, you can use the dynamic utilities in your CSS files or HTML classes. Here are some examples:
Available Utilities
-------------------
* mask-{image}: Set the mask image dynamically based on the configured backgroundImage.
* mask-linear: Apply a linear gradient mask.
* mask-shape-circle: Set the mask shape to a circle.
* mask-shape-ellipse: Set the mask shape to an ellipse.
* mask-reach-{value}: Define the mask reach (e.g., closest-side, farthest-corner).
* mask-at-{position}: Position the mask (e.g., center, top, bottom).
* Mask Repeat: Control the repeat behavior of the mask with utilities like mask-repeat, mask-repeat-x, mask-repeat-y, etc.
* Mask Size: Define the size of the mask using mask-size utilities.
* Mask Position: Control the position of the mask with mask-position.
Configuration
-------------
You can customize the plugin’s behavior by modifying the values in your tailwind.config.js file.
Example configuration:
module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
'custom-pattern': "url('/path/to/your/image.png')",
}),
},
},
}
License
-------
This project is licensed under the MIT License. See the LICENSE file for more information.
Contributing
------------
Contributions are welcome! If you have suggestions for improvements or find bugs, feel free to open an issue or submit a pull request.