postcss-blend-colors v1.1.3
PostCSS Blend Colors Plugin
The PostCSS Blend Colors plugin is designed to simplify the process of blending colors within CSS declarations. It utilizes the chroma-js library to perform color blending operations, allowing developers to define custom color blends using a mix() function in their stylesheets.
📇 Table of Contents
Motivation
The motivation behind this plugin is to provide a seamless way for web developers to incorporate custom color blending effects into their stylesheets. While CSS already supports basic color blending modes, the mix() function allows developers to define their own blending ratios and apply them to various color formats. This flexibility enables designers to create unique and visually appealing color transitions that go beyond the default CSS blending options.
Installation
To use this plugin, you need to have Tailwind CSS installed in your project. If you haven't installed Tailwind CSS yet, follow these steps:
Using pnpm
pnpm add postcss-blend-colors
Using npm
npm install postcss-blend-colors
Using yarn
yarn add postcss-blend-colors
How to set up
In postcss.config.js
module.exports = {
plugins: {
"postcss-blend-colors": {}
}
}
In css
body {
background: mix('blue', 'red', 0.5);
}
Converted output
body {
background: #800080;
}
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.