Package Exports

tailwindcss-root-variables
tailwindcss-root-variables/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-root-variables) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🎨 Tailwind CSS Variables Plugin 🎨

This Tailwind CSS plugin allows you to define custom CSS root variables that can be used throughout your stylesheets. It provides a way to manage and organize CSS variables efficiently using Tailwind's configuration.

🚀 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

Option	Description	Required
`defaultPrefix`	A default prefix for variable names.	Optional
`useDefaultPrefixOnly`	If `true`, only the default prefix will be used, and no group name will be included.	Optional
`vars`	An object defining your CSS variables.	Optional

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.