Custom Property colour plugin for Tailwind. Used in this case where `.focus-pink` would set `--focus-colour` but could be anything

1-plugin.js

const plugin = require('tailwindcss/plugin')

const baseClass = '.focus'
const property = '--focus-colour'

const getColours = (colours, prefix, e) => {
  let utils = {}
  for (const key in colours) {

    if (typeof colours[key] === 'object') {
      const subColours = getColours(colours[key], `-${key}`, e)
      utils = {
        ...utils,
        ...subColours
      }
      continue
    }

    let classSuffix = prefix
    if (key !== 'DEFAULT') classSuffix += `-${key}`
    utils[baseClass + e(classSuffix)] = {
      [property]: colours[key]
    }
  }

  return utils
}

const focusColour = plugin(({ addUtilities, theme, e }) => {
  addUtilities(getColours(theme('colors', {}), '', e))
})

module.exports = focusColour

2-usage.js

module.exports = {
  plugins: [
    require('./1-plugin.js')
  ]
}

3-internal.js

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, theme, e }) {
      const baseClass = '.focus'
      const property = '--focus-colour'
      function getColours(colours, prefix = '') {
        let utils = {}
        for (const key in colours) {

          if (typeof colours[key] === 'object') {
            const subColours = getColours(colours[key], `-${key}`)
            utils = {
              ...utils,
              ...subColours
            }
            continue
          }

          let classSuffix = prefix
          if (key !== 'DEFAULT') classSuffix += `-${key}`
          utils[baseClass + e(classSuffix)] = {
            [property]: colours[key]
          }
        }

        return utils
      }
      addUtilities(getColours(theme('colors', {})))
    })
  ]
}