├── .github ├── FUNDING.yml └── workflows │ └── publish.yml ├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json └── src └── index.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [marcreichel] 2 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish 2 | 3 | on: 4 | release: 5 | types: [published] 6 | 7 | jobs: 8 | publish-npm: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v2 12 | - uses: actions/setup-node@v1 13 | with: 14 | node-version: ^14.17.3 15 | registry-url: https://registry.npmjs.org 16 | - name: Check package version 17 | uses: technote-space/package-version-check-action@v1 18 | with: 19 | COMMIT_DISABLED: 1 20 | - run: npm ci 21 | - run: npm publish 22 | env: 23 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 24 | publish-github: 25 | runs-on: ubuntu-latest 26 | steps: 27 | - uses: actions/checkout@v2 28 | - uses: actions/setup-node@v2 29 | with: 30 | node-version: ^14.17.3 31 | - name: Check package version 32 | uses: technote-space/package-version-check-action@v1 33 | with: 34 | COMMIT_DISABLED: 1 35 | - run: npm ci 36 | - uses: actions/setup-node@v2 37 | with: 38 | node-version: ^14.17.3 39 | registry-url: 'https://npm.pkg.github.com' 40 | - run: npm publish 41 | env: 42 | NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | # IDE 107 | .idea/ 108 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Marc Reichel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Tailwind CSS Color Properties 3 |

4 | 5 |

6 | A Tailwind CSS plugin that exports theme colors as css custom properties. 7 |

8 | 9 |

10 | version 11 | npm bundle size 12 | npm bundle size 13 | downloads 14 | license 15 |

16 | 17 | ## 🤔 Motivation 18 | 19 | Sometimes it is not possible to use Tailwind color classes directly. For example when configuring colors for some third party packages (via JavaScript). 20 | 21 | ## 🪄 Usage 22 | 23 | After setting up this package your entire Tailwind color palette is available via CSS custom properties and can be referenced like so: 24 | 25 | In HTML: 26 | 27 | ```html 28 |
29 | Text color using custom CSS property 🎉 30 |
31 | ``` 32 | 33 | In JavaScript: 34 | 35 | ```javascript 36 | module.exports = { 37 | config: { 38 | color: 'var(--color-indigo-500)', 39 | }, 40 | }; 41 | ``` 42 | 43 | ## 🚀 Installing 44 | 45 | ``` 46 | npm install @marcreichel/tailwind-css-properties 47 | ``` 48 | 49 | or 50 | 51 | ``` 52 | yarn add @marcreichel/tailwind-css-properties 53 | ``` 54 | 55 | Require it in your Tailwind config: 56 | 57 | ```javascript 58 | // tailwind.config.js 59 | module.exports = { 60 | /* ... */ 61 | plugins: [ 62 | require('@marcreichel/tailwind-css-properties') 63 | ] 64 | } 65 | ``` 66 | 67 | ## 📄 License 68 | 69 | Copyright (c) 2022 Marc Reichel and contributors. 70 | 71 | Licensed under the MIT license, see [LICENSE](LICENSE) for details. 72 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@marcreichel/tailwind-css-properties", 3 | "version": "1.0.0", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "@marcreichel/tailwind-css-properties", 9 | "version": "1.0.0", 10 | "license": "MIT" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@marcreichel/tailwind-css-properties", 3 | "version": "0.0.0", 4 | "description": "A Tailwind CSS plugin that exports theme colors as css custom properties.", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "test": "echo \"No test specified\"" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/marcreichel/tailwind-css-properties.git" 12 | }, 13 | "keywords": [ 14 | "tailwind", 15 | "tailwindcss", 16 | "css", 17 | "plugin" 18 | ], 19 | "author": "Marc Reichel", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/marcreichel/tailwind-css-properties/issues" 23 | }, 24 | "homepage": "https://github.com/marcreichel/tailwind-css-properties#readme", 25 | "dependencies": {}, 26 | "files": [ 27 | "LICENSE", 28 | "README.md", 29 | "src/index.js", 30 | "package.json" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | module.exports = function({ addBase, theme }) { 2 | const cssProperties = {}; 3 | const colors = theme('colors'); 4 | for (let color in colors) { 5 | if (colors.hasOwnProperty(color)) { 6 | if (typeof colors[color] === 'string') { 7 | cssProperties[`--color-${color}`] = colors[color]; 8 | } else if (typeof colors[color] === 'object') { 9 | for (let shade in colors[color]) { 10 | if (colors[color].hasOwnProperty(shade)) { 11 | cssProperties[`--color-${color}-${shade}`] = colors[color][shade]; 12 | } 13 | } 14 | } 15 | } 16 | } 17 | 18 | const root = { 19 | ':root': cssProperties, 20 | }; 21 | 22 | addBase(root); 23 | }; 24 | --------------------------------------------------------------------------------