├── .editorconfig ├── .gitignore ├── .idea ├── misc.xml ├── modules.xml ├── tailwind-color-vars.iml └── vcs.xml ├── .npmignore ├── README.md ├── index.js ├── package-lock.json ├── package.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # next.js build output 63 | .next 64 | 65 | 66 | ### JetBrains template 67 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm 68 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 69 | 70 | # User-specific stuff 71 | .idea/**/workspace.xml 72 | .idea/**/tasks.xml 73 | .idea/**/dictionaries 74 | .idea/**/shelf 75 | 76 | # Sensitive or high-churn files 77 | .idea/**/dataSources/ 78 | .idea/**/dataSources.ids 79 | .idea/**/dataSources.local.xml 80 | .idea/**/sqlDataSources.xml 81 | .idea/**/dynamic.xml 82 | .idea/**/uiDesigner.xml 83 | .idea/**/dbnavigator.xml 84 | 85 | # Gradle 86 | .idea/**/gradle.xml 87 | .idea/**/libraries 88 | 89 | # CMake 90 | cmake-build-debug/ 91 | cmake-build-release/ 92 | 93 | # Mongo Explorer plugin 94 | .idea/**/mongoSettings.xml 95 | 96 | # File-based project format 97 | *.iws 98 | 99 | # IntelliJ 100 | out/ 101 | 102 | # mpeltonen/sbt-idea plugin 103 | .idea_modules/ 104 | 105 | # JIRA plugin 106 | atlassian-ide-plugin.xml 107 | 108 | # Cursive Clojure plugin 109 | .idea/replstate.xml 110 | 111 | # Crashlytics plugin (for Android Studio and IntelliJ) 112 | com_crashlytics_export_strings.xml 113 | crashlytics.properties 114 | crashlytics-build.properties 115 | fabric.properties 116 | 117 | # Editor-based Rest Client 118 | .idea/httpRequests 119 | 120 | 121 | ### macOS template 122 | # General 123 | .DS_Store 124 | .AppleDouble 125 | .LSOverride 126 | 127 | # Icon must end with two \r 128 | Icon 129 | 130 | # Thumbnails 131 | ._* 132 | 133 | # Files that might appear in the root of a volume 134 | .DocumentRevisions-V100 135 | .fseventsd 136 | .Spotlight-V100 137 | .TemporaryItems 138 | .Trashes 139 | .VolumeIcon.icns 140 | .com.apple.timemachine.donotpresent 141 | 142 | # Directories potentially created on remote AFP share 143 | .AppleDB 144 | .AppleDesktop 145 | Network Trash Folder 146 | Temporary Items 147 | .apdisk 148 | 149 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/tailwind-color-vars.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | 3 | .editorconfig 4 | .gitignore 5 | .npmignore 6 | 7 | yarn.lock 8 | package-lock.json 9 | *.tgz 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This plugin generates a set of css vars from tailwinds colors list and puts then into the `:root` selector. 2 | 3 | ## Install 4 | ```bash 5 | yarn add tailwind-color-vars 6 | # or 7 | npm i tailwind-color-vars 8 | ``` 9 | 10 | ## API 11 | 12 | #### `colorVars({ colors, strategy = 'override', colorTransform } = {})` 13 | Creates tailwind plugin that registers colors from config as css vars. 14 | 15 | - _`colors`_: [optional] an object with colors to extend, replace or override config colors
16 | - _`strategy`_: [optional] string:
17 | - `extend`_: will merge config colors with given colors, config ones will take priority
18 | - `override`_: will merge config colors with given colors, given ones will take priority
19 | - `replace`_: will discard config colors and only use given ones
20 | - _`colorTransform`_: [optional] Function that will be invoked on every color value before injection
21 | 22 | ## Usage 23 | In tailwind config 24 | ```javascript 25 | const colorVars = require('tailwind-color-vars') 26 | module.exports = { 27 | plugins: [ 28 | colorVars(), 29 | ], 30 | } 31 | ``` 32 | This will produce css like: 33 | ```css 34 | :root { 35 | --transparent: transparent; 36 | --black: #22292f; 37 | --grey-darkest: #3d4852; 38 | --grey-darker: #606f7b; 39 | --grey-dark: #8795a1; 40 | ... 41 | } 42 | ``` 43 | To extend, override or replace colors: 44 | ```javascript 45 | const colorVars = require('tailwind-color-vars') 46 | module.exports = { 47 | plugins: [ 48 | colorVars({ 49 | colors: { 50 | 'primary': 'rgba(0, 80, 200, 0.7)', 51 | 'black': 'black', 52 | }, 53 | // default value, this will give passed values priority 54 | strategy: 'override', 55 | }), 56 | ], 57 | } 58 | ``` 59 | This will produce: 60 | ```css 61 | :root { 62 | --primary: rgba(0, 80, 200, 0.7); 63 | --transparent: transparent; 64 | --black: black; 65 | ... 66 | } 67 | ``` 68 | To process every color value before injection you can specify `colorTransform`. For example you can transform all values to a set value type: 69 | ```javascript 70 | const colorVars = require('tailwind-color-vars') 71 | const tinycolor = require("tinycolor2"); 72 | module.exports = { 73 | plugins: [ 74 | colorVars({ 75 | colors: { 76 | 'primary': 'rgba(0, 80, 200, 0.7)', 77 | 'black': 'black', 78 | }, 79 | // this will give priority to config values 80 | // so black will not be overridden 81 | strategy: 'extend', 82 | // this will parse each color value and return it in `rgb()/rgba()` format 83 | colorTransform: col => tinycolor(col).toRgbString() 84 | }), 85 | ], 86 | } 87 | ``` 88 | This will produce: 89 | ```css 90 | :root { 91 | --primary: rgba(0, 80, 200, 0.7); 92 | --black: rgb(34, 41, 47); 93 | --transparent: rgba(0, 0, 0, 0); 94 | --grey-darkest: rgb(61, 72, 82); 95 | --grey-darker: rgb(96, 111, 123); 96 | ... 97 | } 98 | ``` 99 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = function colorVars({ colors, strategy = 'override', colorTransform } = {}) { 2 | return function tailwindColorVarsPlugin({ addUtilities, addComponents, e, prefix, config }) { 3 | if (colors && typeof colors === 'object') { 4 | if (strategy === 'override') { 5 | colors = Object.assign({}, config('colors'), colors) 6 | } else if (strategy === 'replace') { 7 | //colors = colors 8 | } else if (strategy === 'extend') { 9 | colors = Object.assign({}, colors, config('colors')) 10 | } 11 | } else { 12 | colors = config('colors') 13 | } 14 | let names = Object.keys(colors) 15 | let root = {}, css = { 16 | ':root': root, 17 | } 18 | names.forEach(col => { 19 | root[`--${e(col)}`] = colorTransform ? colorTransform(colors[col]) : colors[col] 20 | }) 21 | addComponents(css) 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwind-color-vars", 3 | "version": "0.1.0", 4 | "lockfileVersion": 1 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwind-color-vars", 3 | "version": "0.1.3", 4 | "description": "Tailwind plugin to generate css vars '--color-name' for colors list.", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git@github.com:n1kk/tailwind-color-vars.git" 9 | }, 10 | "scripts": {}, 11 | "author": "n1kk", 12 | "keywords": ["tailwindcss", "tailwind", "plugin", "colors", "css variables", "css vars"], 13 | "license": "MIT" 14 | } 15 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | --------------------------------------------------------------------------------