https://github.com/0xtlt/tailwindcss-var-generator
A plugin for Tailwind CSS that generates CSS variables for all of the colors, sizes, and other styles defined in your Tailwind config. This allows you to use the styles from your Tailwind config directly in your CSS code.
https://github.com/0xtlt/tailwindcss-var-generator
Last synced: about 2 months ago
JSON representation
A plugin for Tailwind CSS that generates CSS variables for all of the colors, sizes, and other styles defined in your Tailwind config. This allows you to use the styles from your Tailwind config directly in your CSS code.
- Host: GitHub
- URL: https://github.com/0xtlt/tailwindcss-var-generator
- Owner: 0xtlt
- License: mit
- Created: 2022-12-06T10:32:23.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-06T14:41:22.000Z (over 3 years ago)
- Last Synced: 2026-01-26T17:53:05.506Z (5 months ago)
- Language: TypeScript
- Size: 47.9 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tailwindcss-var-generator
A plugin for Tailwind CSS that generates CSS variables for all of the colors, sizes, and other styles defined in your Tailwind config. This allows you to use the styles from your Tailwind config directly in your CSS code.
## Installation
To install this package, run the following command:
```bash
npm install tailwindcss-var-generator
```
## Usage
First, you need to import the `tailwindCssVariables` function from this package and add it to your Tailwind plugin list:
```js
const plugin = require("tailwindcss/plugin");
const { tailwindCssVariables } = require("tailwindcss-var-generator");
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {},
plugins: [tailwindCssVariables()],
};
```
The `tailwindCssVariables` function takes one optional argument, displayKinds, which is an array of styles that you want to generate CSS variables for. By default, it will generate CSS variables for colors and font sizes. You can pass in any combination of the following values to customize which styles to include:
- "colors": generates CSS variables for all of the colors defined in the Tailwind config.
- "font-sizes": generates CSS variables for all of the font sizes defined in the Tailwind config.
For example, if you only want to generate CSS variables for colors, you can call the `tailwindCssVariables` function like this:
```js
tailwindCssVariables(["colors"]);
```
Once you have added the `tailwindCssVariables` function to your Tailwind plugin list, you can use the generated CSS variables in your CSS code:
```css
/*
* This will use the value of the `red.500` color defined in your Tailwind
* config as the value of the `color` property.
*/
.my-class {
color: var(--color-red-500);
}
```