Extending Tailwind CSS color palattes to create custom prefxied colors.

icon-colors.js

const plugin = require('tailwindcss/plugin')

/**
 * Utlizes tailwind colors config and icon-{color} class is created, analog to bg- and text- classes.
 *
 * eg. class="icon-white"
 */
const generateColors = (e, colors, prefix) =>
  Object.keys(colors).reduce((acc, key) => {
    if (typeof colors[key] === 'string') {
      return {
        ...acc,
        [`${prefix}-${e(key)}`]: {
          'color': colors[key],
        },
      }
    }

    return { ...acc, ...generateColors(e, colors[key], `${prefix}-${e(key)}`) }
  }, {})

module.exports = plugin.withOptions(({ className = 'icon' } = {}) => {
  return ({ e, addUtilities, theme, variants }) => addUtilities(generateColors(e, theme('colors'), `.${className}`), variants('svgColor'))
})