Features

• Dynamic Backgrounds: Add grid and dot pattern backgrounds with customizable colors.
• Color Variables: Automatically generate CSS variables for all Tailwind colors.

Installation

Install the package via npm:

npm install @inspira-ui/plugins

Usage

To use the plugins in your Tailwind CSS configuration, simply import the setupInspiraUI function and add it to your plugins array:

// tailwind.config.js
const { setupInspiraUI } = require("@inspira-ui/plugins");

module.exports = {
    // Your Tailwind configuration...
    plugins: [setupInspiraUI],
};

or if using tailwind.config.ts

// tailwind.config.ts
import { setupInspiraUI } from "@inspira-ui/plugins";

export default {
    // Your Tailwind configuration...
    plugins: [setupInspiraUI],
};

This setup will automatically include all the custom plugins provided by this package.

About

Supporting Package for Inspira UI

@inspira-ui/plugins is designed to work seamlessly with Inspira UI, a modern UI component library for Vue.js. While it enhances the capabilities of Inspira UI, this package is also fully compatible with any Tailwind CSS project, offering flexibility for developers who want to use the plugins independently.

Available Plugins

1. addBackgrounds

Adds dynamic background utilities such as grid and dot patterns with customizable colors.

• Classes Generated:
  • .bg-grid
  • .bg-grid-small
  • .bg-dot

2. addVariablesForColors

Generates CSS variables for all colors defined in your Tailwind configuration.

• CSS Variables: Creates variables like --primary, --secondary, etc., based on your Tailwind color palette.

License

This project is licensed under the MIT License.

Contact

• Author: Rahul Vashishtha
• Website: rahulv.dev
• Repository: GitHub

For any bugs or issues, please open a new issue on the GitHub Issues page.