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
tofull
, 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.