This function generates custom color utility classes for any CSS property in Tailwind CSS. It extends Tailwind's color palette to properties not covered by default utilities, such as `stop-color` for SVG gradients or `caret-color` for text inputs.

tailwind.config.js

function generateColorUtilities(cssProperty) {
  return function({ addUtilities, theme }) {
    const newUtilities = {}
    Object.entries(theme('colors')).forEach(([key, value]) => {
      if (typeof value === 'object') {
        Object.entries(value).forEach(([shade, color]) => {
          newUtilities[`.${cssProperty}-${key}-${shade}`] = {
            [cssProperty]: color,
          }
        })
      } else {
        newUtilities[`.${cssProperty}-${key}`] = {
          [cssProperty]: value,
        }
      }
    })
    addUtilities(newUtilities)
  }
}

module.exports = {
  // ... other config options
  plugins: [
    generateColorUtilities('stop-color'),
    generateColorUtilities('caret-color'),
    // ... other plugins
  ],
}