https://github.com/ealexandros/tailwindcss-root-variables
🎨 A Tailwind CSS plugin for defining custom CSS variables to use across your stylesheet.
https://github.com/ealexandros/tailwindcss-root-variables
css css-variables root-variables tailwind tailwind-plugin tailwindcss tailwindcss-plugin tailwindcss-variables
Last synced: about 1 month ago
JSON representation
🎨 A Tailwind CSS plugin for defining custom CSS variables to use across your stylesheet.
- Host: GitHub
- URL: https://github.com/ealexandros/tailwindcss-root-variables
- Owner: ealexandros
- License: mit
- Created: 2024-09-08T12:55:01.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-07T08:15:58.000Z (over 1 year ago)
- Last Synced: 2025-09-11T15:08:43.391Z (6 months ago)
- Topics: css, css-variables, root-variables, tailwind, tailwind-plugin, tailwindcss, tailwindcss-plugin, tailwindcss-variables
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/tailwindcss-root-variables
- Size: 32.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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:
```bash
$ npm install --save-dev tailwindcss-root-variables
```
You can find the package on [npm here](https://www.npmjs.com/package/tailwindcss-root-variables).
#### 2. Add the plugin to your Tailwind CSS configuration:
```javascript
// 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:
```javascript
// 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:
```css
: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` type to type to seamlessly incorporate custom CSS variables into your Tailwind CSS configuration.
```typescript
// typescript.config.ts
import type { Config } from "tailwindcss";
import type { WithRootVarsType } from "tailwindcss-root-variables";
const config: WithRootVarsType = {
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:
```css
.some-class {
color: var(--my-colors-primary);
margin: var(--my-spacing-medium);
}
```
## 📝 License
This plugin is licensed under the [MIT License](https://github.com/ealexandros/tailwindcss-root-variables/blob/main/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.