🚀 Installation

To use this plugin, you need to install it and add it to your Tailwind CSS configuration.

1. Install the plugin:

$ npm install --save-dev tailwindcss-root-variables

You can find the package on npm here.

2. Add the plugin to your Tailwind CSS configuration:

// tailwind.config.js

module.exports = {
  // other configuration...
  plugins: [require("tailwindcss-root-variables")],
};

⚙️ Configuration

You can configure the plugin in your tailwind.config.js file using the rootVars key.

Configuration Options

Example Configuration:

// tailwind.config.js

const customSpacing = {
  small: "4px",
  medium: "8px",
  large: "16px",
};

module.exports = {
  rootVars: {
    defaultPrefix: "my",
    useDefaultPrefixOnly: false,
    vars: {
      colors: {
        primary: "#ff5733",
        secondary: "#33ff57",
      },
      spacing: customSpacing,
    },
  },
  // additional config...
};

This configuration will generate the following CSS variables:

:root {
  --my-colors-primary: #ff5733;
  --my-colors-secondary: #33ff57;
  --my-spacing-small: 4px;
  --my-spacing-medium: 8px;
  --my-spacing-large: 16px;
}

Integrating with Typescript

Use the WithRootVarsType<Config> type to type to seamlessly incorporate custom CSS variables into your Tailwind CSS configuration.

// typescript.config.ts

import type { Config } from "tailwindcss";
import type { WithRootVarsType } from "tailwindcss-root-variables";

const config: WithRootVarsType<Config> = {
  rootVars: {
    defaultPrefix: "my",
    // additional config...
  },
  // additional config...
};

export default config;

💫️ Usage

After configuring the plugin, you can use the generated CSS variables in your stylesheets as you normally would:

.some-class {
  color: var(--my-colors-primary);
  margin: var(--my-spacing-medium);
}

📝 License

This plugin is licensed under the MIT License.

🤝 Contributing

If you would like to contribute to the development of this plugin, please submit a pull request or open an issue with any suggestions or bugs.