Generate Tailwind CSS Color Variables / Config

run_on_page.js

/* 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))