This simple plugin for Tailwind CSS allows you to easily create badge components with various sizes and color schemes. It's designed to integrate seamlessly with your Tailwind projects, providing a straightforward way to include badges without needing extensive custom configurations.

• Dynamic Color Schemes: Automatically adjusts badge text color based on the background for optimal readability.
• Size Variants: Includes a range of size options from none to full, allowing you to choose the perfect fit for your badges.
• Opacity Variants: Supports opacity variations for each color, offering more flexibility in badge styling.

To install the plugin, add it to your project using npm or yarn:

npm install @kembec/tailwindcss-badge-plugin
# or
yarn add @kembec/tailwindcss-badge-plugin

After installation, require it in your tailwind.config.js file:

const badgePlugin = require('@kembec/tailwindcss-badge-plugin');

module.exports = {
  //...
  plugins: [
    badgePlugin,
    // other plugins...
  ],
};

The plugin works out of the box with the default Tailwind CSS colors and can be customized through the Tailwind theme configuration. Here's an example of extending your theme colors:

module.exports = {
  theme: {
    extend: {
      colors: {
        customColor: '#abcdef',
      },
    },
  },
  plugins: [
    require('@kembec/tailwindcss-badge-plugin'),
    // other plugins...
  ],
};

Contributions are welcome! If you'd like to help improve this plugin, please feel free to submit a pull request or open an issue on the GitHub repository.

This plugin is available under the AGPL-3.0 license. For more information, please refer to the LICENSE file in the repository.