PostCSS Blend Colors Plugin

A PostCSS plugin for mixing to colors.

📇 Table of Contents

• Installation
  • Using pnpm
  • Using npm
  • Using yarn
• Setup config
  • How to use
  • Output
• Contributing
  • Contributors
• License
• Author

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

Setup config

In postcss.config.js paste the following

module.exports = {
  plugins: {
    "postcss-blend-colors": {}
  }
}

How to use

body {
  background: mix(red, blue);
  color: mix(red, blue, 0.25);
}

Output

body {
  background: #b400b4;
  color: #dd0080;
}

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.

Author

Claude Myburgh

• Github: @designbycode
• Npm: @designbycode_

Changelog

v1.1.1

Added or Changed

• Change default shadow color to rgb
• Add video to Readme

v1.1.0

Added or Changed

• Converted project to Typescript
• Added with options feature to set default style.

v1.0.0

Added or Changed

• Added this changelog :)