Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/n1kk/tailwind-color-vars
Tailwind plugin to generate css vars '--color-name' for colors list.
https://github.com/n1kk/tailwind-color-vars
Last synced: 1 day ago
JSON representation
Tailwind plugin to generate css vars '--color-name' for colors list.
- Host: GitHub
- URL: https://github.com/n1kk/tailwind-color-vars
- Owner: n1kk
- Created: 2018-07-13T11:43:21.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-26T10:07:20.000Z (over 5 years ago)
- Last Synced: 2024-09-17T14:19:15.026Z (8 days ago)
- Language: JavaScript
- Size: 5.86 KB
- Stars: 29
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This plugin generates a set of css vars from tailwinds colors list and puts then into the `:root` selector.
## Install
```bash
yarn add tailwind-color-vars
# or
npm i tailwind-color-vars
```
## API
#### `colorVars({ colors, strategy = 'override', colorTransform } = {})`
Creates tailwind plugin that registers colors from config as css vars.
- _`colors`_: [optional] an object with colors to extend, replace or override config colors
- _`strategy`_: [optional] string:
- `extend`_: will merge config colors with given colors, config ones will take priority
- `override`_: will merge config colors with given colors, given ones will take priority
- `replace`_: will discard config colors and only use given ones
- _`colorTransform`_: [optional] Function that will be invoked on every color value before injection
## Usage
In tailwind config
```javascript
const colorVars = require('tailwind-color-vars')
module.exports = {
plugins: [
colorVars(),
],
}
```
This will produce css like:
```css
:root {
--transparent: transparent;
--black: #22292f;
--grey-darkest: #3d4852;
--grey-darker: #606f7b;
--grey-dark: #8795a1;
...
}
```
To extend, override or replace colors:
```javascript
const colorVars = require('tailwind-color-vars')
module.exports = {
plugins: [
colorVars({
colors: {
'primary': 'rgba(0, 80, 200, 0.7)',
'black': 'black',
},
// default value, this will give passed values priority
strategy: 'override',
}),
],
}
```
This will produce:
```css
:root {
--primary: rgba(0, 80, 200, 0.7);
--transparent: transparent;
--black: black;
...
}
```
To process every color value before injection you can specify `colorTransform`. For example you can transform all values to a set value type:
```javascript
const colorVars = require('tailwind-color-vars')
const tinycolor = require("tinycolor2");
module.exports = {
plugins: [
colorVars({
colors: {
'primary': 'rgba(0, 80, 200, 0.7)',
'black': 'black',
},
// this will give priority to config values
// so black will not be overridden
strategy: 'extend',
// this will parse each color value and return it in `rgb()/rgba()` format
colorTransform: col => tinycolor(col).toRgbString()
}),
],
}
```
This will produce:
```css
:root {
--primary: rgba(0, 80, 200, 0.7);
--black: rgb(34, 41, 47);
--transparent: rgba(0, 0, 0, 0);
--grey-darkest: rgb(61, 72, 82);
--grey-darker: rgb(96, 111, 123);
...
}
```