Set color variables in CSS from Tailwind

extract_css_variables.js

// source: https://gist.github.com/Merott/d2a19b32db07565e94f10d13d11a8574
// this exposes all our colors as CSS variables
// this goes in as the last step in your plugins
function ({ addBase, theme }) {
  function extractColorVars(colorObj, colorGroup = '') {
    return Object.keys(colorObj).reduce((vars, colorKey) => {
      const value = colorObj[colorKey];

      const newVars =
        typeof value === 'string'
          ? { [`--color${colorGroup}-${colorKey}`]: value }
          : extractColorVars(value, `-${colorKey}`);

      return { ...vars, ...newVars };
    }, {});
  }

  addBase({
    ':root': extractColorVars(theme('colors')),
  });
}