https://github.com/ewgenius/tailwindcss-variable-themes
TailwindCSS plugin for defining themes based on css variables
https://github.com/ewgenius/tailwindcss-variable-themes
Last synced: about 1 year ago
JSON representation
TailwindCSS plugin for defining themes based on css variables
- Host: GitHub
- URL: https://github.com/ewgenius/tailwindcss-variable-themes
- Owner: ewgenius
- License: mit
- Created: 2023-01-26T07:57:54.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-07T15:01:46.000Z (almost 2 years ago)
- Last Synced: 2025-03-29T20:43:25.178Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://tailwindcss-variable-themes.vercel.app/custom
- Size: 245 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# tailwindcss-variable-themes
TailwindCSS plugin for setting up multiple themes based on css variables
## Examples
https://tailwindcss-variable-themes.vercel.app/custom ([code](apps/example/tailwind-custom.config.js))
https://tailwindcss-variable-themes.vercel.app/radix-colors ([code](apps/example/tailwind-radix.config.js))
https://tailwindcss-variable-themes.vercel.app/radix-semantic ([code](apps/example/tailwind-radix-semantic.config.js))
https://tailwindcss-variable-themes.vercel.app/tailwind-colors ([code](apps/example/tailwind-tailwind.config.js))
## Installation
Install the plugin from npm:
```sh
npm install -D tailwindcss-variable-themes
```
Then add the plugin to your tailwind.config.js file:
```js
const tailwindThemePlugin = require("tailwindcss-variable-themes");
module.exports = {
theme: {
// ...
},
plugins: [
tailwindThemePlugin({
themes: {
light: {
primary: {
foreground: "#000",
background: "#fff",
// ...
},
accent: {
// ...
},
},
dark: {
// ...
},
},
}),
],
};
```
Add theme class to the root of your application:
```html
```
## Configuration
### `themes: object` (required)
Dictionary with theme declarations
```js
themes: {
// light theme
light: {
// primary palette
primary: {
// primary palette colors
foreground: "#000",
background: "#fff",
// ...
},
// accent palette
accent: {
// ...
},
},
dark: {
primary: {
foreground: "#fff",
background: "#000",
// ...
}
// ...
},
},
```
### `utilityPrefix: string` (optional, default = `"theme"`)
Prefix for generated utility classes
Theme, from previous example will generate following tailwind classes for setting up theme:
```css
.theme-light {
--primary-foreground: #000;
--primary-background: #fff;
/* ... */
}
.theme-dark {
--primary-foreground: #fff;
--primary-background: #000;
/* ... */
}
```
### `varNameMapper: (key: string, i?: number) => string` (optional, default = `(key) => key`)
You can specify custom mapper, in case if you need more control over generated variable names