https://github.com/pacexy/tailwindcss-variable-colors
Add dark mode support with just one class
https://github.com/pacexy/tailwindcss-variable-colors
tailwindcss tailwindcss-plugin
Last synced: 9 months ago
JSON representation
Add dark mode support with just one class
- Host: GitHub
- URL: https://github.com/pacexy/tailwindcss-variable-colors
- Owner: pacexy
- Created: 2023-04-29T08:49:24.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-19T13:11:35.000Z (over 1 year ago)
- Last Synced: 2024-05-20T13:53:45.161Z (over 1 year ago)
- Topics: tailwindcss, tailwindcss-plugin
- Language: TypeScript
- Homepage: https://tailwindcss-variable-colors.vercel.app
- Size: 146 KB
- Stars: 32
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tailwindcss Variable Colors
Add dark mode support with just one class
## Demo
## Installation
```sh
pnpm i -D tailwindcss-variable-colors
```
## Usage
```ts
// tailwind.config.ts
import { Config } from 'tailwindcss'
import colors from 'tailwindcss/colors'
import { createVariableColors, variableColorsPlugin } from 'tailwindcss-variable-colors'
const config: Config = {
content: ['./src/**/*.tsx'],
theme: {
// You can also not pass the colors parameter,
// it will use the colors from tailwindcss by default.
colors: createVariableColors(colors),
},
plugins: [variableColorsPlugin(colors)],
}
export default config
```
```tsx
// Button.tsx
const Button = () => (
Button
)
```
That's it!
## Production
To reduce the css bundle size, you can use [`postcss-prune-var`](https://github.com/tomasklaen/postcss-prune-var) to prune unused css variables.
First, install it as a dev dependency
```sh
pnpm i -D postcss-prune-var
```
Then add it to postcss config
```js
//postcss.config.js
module.exports = {
plugins: {
// ...
'postcss-prune-var': {},
},
}
```
## Inspired by
## License
MIT