├── .gitignore ├── LICENSE ├── README.md ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | *.local 5 | yarn.lock 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 synw 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 | # Tailwindcss semantic colors plugin 2 | 3 | [![pub package](https://img.shields.io/npm/v/tailwindcss-semantic-colors)](https://www.npmjs.com/package/tailwindcss-semantic-colors) 4 | 5 | A Tailwind css plugin to generate semantic color utilities with dark mode support 6 | 7 | ## Install 8 | 9 | ```bash 10 | npm install -D tailwindcss-semantic-colors 11 | # or 12 | yarn add -D tailwindcss-semantic-colors 13 | ``` 14 | 15 | Enable the plugin in `tailwind.config.js`: 16 | 17 | ```javascript 18 | module.exports = { 19 | // ... 20 | plugins: [ 21 | // ... 22 | require('tailwindcss-semantic-colors'), 23 | ], 24 | } 25 | ``` 26 | 27 | ## Usage 28 | 29 | Define your semantic colors in the theme in `tailwind.config.js`. 30 | 31 | ```javascript 32 | const colors = require('tailwindcss/colors') 33 | 34 | module.exports = { 35 | // ... 36 | darkMode: 'class', 37 | theme: { 38 | semanticColors: { 39 | primary: { 40 | light: { 41 | bg: colors.cyan[700], 42 | txt: colors.white 43 | }, 44 | dark: { 45 | bg: colors.cyan[800], 46 | txt: colors.neutral[100] 47 | } 48 | }, 49 | // ... 50 | } 51 | }, 52 | } 53 | ``` 54 | 55 | ### Background and text utilities 56 | 57 | All the color utilities generated support the dark mode. Example: writing: 58 | 59 | ```html 60 |
Primary block
61 | ``` 62 | 63 | will do the same as: 64 | 65 | ```html 66 |
Primary block
67 | ``` 68 | 69 | ### Background only utilities 70 | 71 | ```html 72 |
Primary background block
73 | ``` 74 | 75 | will do the same as: 76 | 77 | ```html 78 |
Primary background block
79 | ``` 80 | 81 | ### Text only utilities 82 | 83 | ```html 84 |
Primary text block
85 | ``` 86 | 87 | will do the same as: 88 | 89 | ```html 90 |
Primary text block
91 | ``` 92 | 93 | ### Border utilities 94 | 95 | ```html 96 |
Block with border
97 | ``` 98 | 99 | will do the same as: 100 | 101 | ```html 102 |
Block with border
103 | ``` 104 | 105 | ### Variants 106 | 107 | To apply variants on a color. If we have defined another semantic color: 108 | 109 | ```javascript 110 | semanticColors: { 111 | warning: { 112 | light: { 113 | bg: colors.amber[500], 114 | txt: colors.white 115 | }, 116 | dark: { 117 | bg: colors.amber[600], 118 | txt: colors.neutral[100] 119 | } 120 | }, 121 | // ... 122 | } 123 | ``` 124 | 125 | Example of the `hover` variant: 126 | 127 | ```html 128 |
Primary hover block
129 | ``` 130 | 131 | will do the same as: 132 | 133 | ```html 134 |
135 | Primary hover block 136 |
137 | ``` 138 | 139 | Many variants are enabled by default but you can configure your variants in `tailwind.config.js`. 140 | 141 | ```javascript 142 | module.exports = { 143 | // ... 144 | variants: { 145 | semanticColors: ['focus', 'hover'] 146 | } 147 | } 148 | ``` -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const plugin = require('tailwindcss/plugin') 2 | 3 | const semanticColors = plugin( 4 | function ({ addUtilities, theme, variants, e }) { 5 | const values = theme('semanticColors') 6 | addUtilities( 7 | [ 8 | Object.entries(values).map(([key, value]) => { 9 | return { 10 | [`.${e(`${key}`)}`]: { 11 | backgroundColor: `${value.light.bg}`, 12 | color: `${value.light.txt}`, 13 | }, 14 | [`.txt-${e(`${key}`)}`]: { 15 | color: `${value.light.bg}`, 16 | }, 17 | [`.block-${e(`${key}`)}`]: { 18 | backgroundColor: `${value.light.bg}`, 19 | }, 20 | [`.bord-${e(`${key}`)}`]: { 21 | borderColor: `${value.light.bg}`, 22 | }, 23 | '.dark': { 24 | [`& .${e(`${key}`)}`]: { 25 | backgroundColor: `${value.dark.bg}`, 26 | color: `${value.dark.txt}`, 27 | }, 28 | [`& .txt-${e(`${key}`)}`]: { 29 | color: `${value.dark.bg}`, 30 | }, 31 | [`& .block-${e(`${key}`)}`]: { 32 | backgroundColor: `${value.dark.bg}`, 33 | }, 34 | [`& .bord-${e(`${key}`)}`]: { 35 | borderColor: `${value.dark.bg}`, 36 | }, 37 | }, 38 | } 39 | }), 40 | ], 41 | variants('semanticColors') 42 | ) 43 | }, 44 | { 45 | variants: { 46 | semanticColors: ['hover', 'dark', 'responsive', 'active', 'focus', 'required', 'invalid', 'disabled', 'file', 'marker', 'selection'], 47 | }, 48 | } 49 | ) 50 | 51 | module.exports = semanticColors -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-semantic-colors", 3 | "version": "0.2.0", 4 | "description": "A Tailwindcss plugin to generate semantic color utilities", 5 | "main": "index.js", 6 | "repository": "https://github.com/synw/tailwindcss-semantic-colors", 7 | "author": "synw", 8 | "license": "MIT", 9 | "devDependencies": { 10 | "tailwindcss": ">=3.0.0" 11 | }, 12 | "files": [ 13 | "/index.js" 14 | ], 15 | "publishConfig": { 16 | "access": "public", 17 | "registry": "https://registry.npmjs.org/" 18 | }, 19 | "keywords": [ 20 | "tailwindcss" 21 | ] 22 | } --------------------------------------------------------------------------------