Last active
January 25, 2020 08:18
-
-
Save skoshy/db393ef514479da0ed8fe0e8e684e91f to your computer and use it in GitHub Desktop.
Generate Tailwind CSS Color Variables / Config
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Run this in the console on https://tailwindcss.com/docs/customizing-colors/ */ | |
| toRRGGBBAASuffix = (num) => (num).toString(16).padEnd(4, 0).substr(2,2) | |
| opacities = [0.2, 0.4, 0.6, 0.8]; | |
| additionalColors = [ | |
| ['black', '#000000'], | |
| ['white', '#ffffff'], | |
| ]; | |
| lines = ''; | |
| obj = {}; | |
| function populateLinesAndObj(colorName, colorVal) { | |
| const varName = `--color-${colorName}`; | |
| lines += `${varName}: ${colorVal};` + '\n'; | |
| obj[colorName] = `var(${varName})`; | |
| opacities.forEach(opac => { | |
| const opacityNum = opac === 0 ? '0' : String(Math.round(opac * 100)); | |
| const rrggbbaaVal = `${colorVal}${toRRGGBBAASuffix(opac)}`; | |
| const colorWithOpacName = `${colorName}-${opacityNum}`; | |
| const varWithOpacName = `${varName}-${opacityNum}`; | |
| lines += `${varName}-${opacityNum}: ${rrggbbaaVal};` + '\n'; | |
| obj[colorWithOpacName] = `var(${varWithOpacName})`; | |
| }); | |
| } | |
| additionalColors.forEach(color => { | |
| populateLinesAndObj(...color); | |
| }); | |
| document.querySelectorAll('div[class="flex flex-wrap -mx-2 mt-0"]')[0].querySelectorAll('div[class="w-1/2 px-2 md:w-full relative mt-4"]').forEach(box => { | |
| const color = box.querySelector('h3').innerText.toLowerCase(); | |
| box.querySelectorAll('div[class="ml-2 text-gray-800 text-xs leading-none pl-1"]').forEach(colorBox => { | |
| const colorNum = colorBox.querySelector('[class="font-semibold"]').innerText; | |
| const hexVal = colorBox.querySelector('[class="mt-1 font-normal opacity-75"]').innerText.toLowerCase(); | |
| populateLinesAndObj(`${color}-${colorNum}`, hexVal); | |
| }); | |
| }); | |
| console.log('↓ Use this in your CSS/SCSS file ↓'); | |
| console.log(lines) | |
| console.log('↓ Use this in your tailwind.config.js file ↓'); | |
| console.log(JSON.stringify(obj)) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment