├── .gitignore ├── README.md ├── index.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tailwindcss-alpha 2 | 3 | > Automatic alpha variants for your Tailwind CSS colors 4 | 5 | ## Why? 6 | 7 | If you’re like me your Tailwind CSS color configuration often ends up looking something like this: 8 | 9 | ```js 10 | module.exports = { 11 | // ... 12 | backgroundColors: { 13 | red: '#f00', 14 | 'red-10': 'rgba(255, 0, 0, 0.1)', 15 | 'red-20': 'rgba(255, 0, 0, 0.2)', 16 | 'red-50': 'rgba(255, 0, 0, 0.5)', 17 | 'red-80': 'rgba(255, 0, 0, 0.8)' 18 | // ... 19 | } 20 | // ... 21 | } 22 | ``` 23 | 24 | `tailwindcss-alpha` automatically generates alpha variations for each of your background, text, and border colors. 25 | 26 | ## Install 27 | 28 | ``` 29 | npm install --save-dev tailwindcss-alpha 30 | ``` 31 | 32 | ```js 33 | // tailwind.js 34 | module.exports = { 35 | // ... 36 | plugins: [ 37 | require('tailwindcss-alpha')({ 38 | modules: { 39 | backgroundColors: true 40 | }, 41 | alpha: { 42 | '10': 0.1, 43 | '30': 0.3 44 | } 45 | }) 46 | ] 47 | // ... 48 | } 49 | ``` 50 | 51 | ## Options 52 | 53 | ### `modules` (optional) 54 | 55 | **Default:** `{ backgroundColors: true, textColors: false, borderColors: false }` 56 | 57 | Here is where you define which Tailwind modules you would like to generate alpha variants for, and which state variants (responsive, hover, etc.) to generate for each. This option behaves in the same way as the [`modules` property in the main Tailwind configuration](https://tailwindcss.com/docs/configuration#modules), with one difference: a value of `true` means "inherit from the main Tailwind `modules` configuration." 58 | 59 | ### `alpha` (optional) 60 | 61 | This is an object containing the alpha values for your new color utilities. If this is not specified in the plugin options the `alpha` property in your main Tailwind configuration will be used. If there is no `alpha` property then the `opacity` property is used. 62 | 63 | The keys of this object appear at the end of the utility class names. For example if you have a background color with a key of `red` and an alpha with a key of `25` then a `bg-red-25` class would be generated. 64 | 65 | ## Example 66 | 67 | ```js 68 | module.exports = { 69 | // ... 70 | backgroundColors: { 71 | red: '#f00' 72 | }, 73 | // ... 74 | plugins: [ 75 | require('tailwindcss-alpha')({ 76 | modules: { 77 | backgroundColors: [] 78 | }, 79 | alpha: { 80 | '25': 0.25, 81 | '50': 0.5, 82 | '75': 0.75 83 | } 84 | }) 85 | ] 86 | // ... 87 | } 88 | ``` 89 | 90 | The configuration above yields the following utilities: 91 | 92 | ```css 93 | .bg-red-25 { 94 | background-color: rgba(255, 0, 0, 0.25); 95 | } 96 | 97 | .bg-red-50 { 98 | background-color: rgba(255, 0, 0, 0.5); 99 | } 100 | 101 | .bg-red-75 { 102 | background-color: rgba(255, 0, 0, 0.75); 103 | } 104 | ``` 105 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const Color = require('color') 2 | 3 | const PREFIXES = { 4 | backgroundColors: ['bg'], 5 | textColors: ['text'], 6 | borderColors: ['border', 'border-t', 'border-r', 'border-b', 'border-l'], 7 | svgFill: ['fill'], 8 | svgStroke: ['stroke'] 9 | } 10 | 11 | const PROPERTIES = { 12 | backgroundColors: ['backgroundColor'], 13 | textColors: ['color'], 14 | borderColors: [ 15 | 'borderColor', 16 | 'borderTopColor', 17 | 'borderRightColor', 18 | 'borderBottomColor', 19 | 'borderLeftColor' 20 | ], 21 | svgFill: ['fill'], 22 | svgStroke: ['stroke'] 23 | } 24 | 25 | module.exports = function(opts = {}) { 26 | return function({ e, addUtilities, config }) { 27 | let { 28 | alpha = config('alpha', config('opacity', {})), 29 | modules = { 30 | backgroundColors: true, 31 | textColors: false, 32 | borderColors: false, 33 | svgFill: false, 34 | svgStroke: false 35 | } 36 | } = opts 37 | 38 | Object.entries(alpha).forEach(([alphaKey, alphaValue]) => { 39 | let alphaValueFloat = parseFloat(alphaValue) 40 | if (alphaValueFloat === 0 || alphaValueFloat === 1) return null 41 | 42 | Object.entries(modules).forEach(([configKey, variants]) => { 43 | if (variants === true) { 44 | variants = config(`modules.${configKey}`, []) 45 | } 46 | if (variants === false) return 47 | 48 | let colors = config(configKey, {}) 49 | 50 | addUtilities( 51 | Object.entries(colors) 52 | .map(([colorKey, color]) => { 53 | try { 54 | let parsed = Color(color) 55 | if (parsed.valpha === 1) { 56 | return PREFIXES[configKey].map((prefix, i) => { 57 | return { 58 | [`.${e(`${prefix}-${colorKey}-${alphaKey}`)}`]: { 59 | [`${PROPERTIES[configKey][i]}`]: parsed 60 | .alpha(alphaValueFloat) 61 | .string() 62 | } 63 | } 64 | }) 65 | } 66 | } catch (err) { 67 | return null 68 | } 69 | return null 70 | }) 71 | .filter(Boolean), 72 | variants 73 | ) 74 | }) 75 | }) 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-alpha", 3 | "version": "0.1.4", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "color": { 8 | "version": "3.0.0", 9 | "resolved": "https://registry.npmjs.org/color/-/color-3.0.0.tgz", 10 | "integrity": "sha512-jCpd5+s0s0t7p3pHQKpnJ0TpQKKdleP71LWcA0aqiljpiuAkOSUFN/dyH8ZwF0hRmFlrIuRhufds1QyEP9EB+w==", 11 | "requires": { 12 | "color-convert": "^1.9.1", 13 | "color-string": "^1.5.2" 14 | } 15 | }, 16 | "color-convert": { 17 | "version": "1.9.1", 18 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz", 19 | "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==", 20 | "requires": { 21 | "color-name": "^1.1.1" 22 | } 23 | }, 24 | "color-name": { 25 | "version": "1.1.3", 26 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", 27 | "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" 28 | }, 29 | "color-string": { 30 | "version": "1.5.2", 31 | "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.2.tgz", 32 | "integrity": "sha1-JuRYFLw8mny9Z1FkikFDRRSnc6k=", 33 | "requires": { 34 | "color-name": "^1.0.0", 35 | "simple-swizzle": "^0.2.2" 36 | } 37 | }, 38 | "is-arrayish": { 39 | "version": "0.3.1", 40 | "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.1.tgz", 41 | "integrity": "sha1-wt/DhquqDD4zxI2z/ocFnmkGXv0=" 42 | }, 43 | "simple-swizzle": { 44 | "version": "0.2.2", 45 | "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", 46 | "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", 47 | "requires": { 48 | "is-arrayish": "^0.3.1" 49 | } 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-alpha", 3 | "version": "0.1.4", 4 | "description": "Automatic alpha variants for your Tailwind CSS colors", 5 | "main": "index.js", 6 | "files": [ 7 | "index.js" 8 | ], 9 | "scripts": {}, 10 | "keywords": [ 11 | "tailwindcss", 12 | "tailwind" 13 | ], 14 | "author": "Brad Cornes ", 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/bradlc/tailwindcss-alpha.git" 18 | }, 19 | "bugs": { 20 | "url": "https://github.com/bradlc/tailwindcss-alpha/issues" 21 | }, 22 | "homepage": "https://github.com/bradlc/tailwindcss-alpha#readme", 23 | "license": "MIT", 24 | "dependencies": { 25 | "color": "^3.0.0" 26 | } 27 | } 28 | --------------------------------------------------------------------------------