tailwind-rgba.js

// Add this to your 'plugins' array in your tailwind config file.
// This creates classes suffixed with an opacity level for each bg colour
// For example, .bg-red would have .bg-red-10 through .bg-red-100 for 0.10% opacity background and 100% opacity respectively.
({addUtilities, config}) => {
      let colors =  config('colors', []);
      const newColors = {};
      let hexToRgb = (hex) => {
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
          r: parseInt(result[1], 16),
          g: parseInt(result[2], 16),
          b: parseInt(result[3], 16)
        } : null;
      }
      for ( i in colors) {
        let c = hexToRgb(colors[i]);
        if (c) {
          let nms = {
            '.1':'10',
            '.2':'20',
            '.3':'30',
            '.4':'40',
            '.5':'50',
            '.6':'60',
            '.7':'70',
            '.8':'80',
            '.9':'90',
            '1.0':'100'
          };
          for (o in nms) {
            newColors[`.bg-${i}-${nms[o]}`] = {
              'background-color': `rgba(${c.r},${c.g},${c.b}, ${o})`
            };
          }
        }
      }
      addUtilities(newColors);
    }

@mxmtsk awesome, had totally forgotten about this gist tbh! Thanks for keeping it alive.

With mxmtsk's function I get css classes like

.bg-gray-100-10 {
  background-color: rgba(247,250,252, undefined);
}

so I changed var o in nms to const o in nms which reveals o is not defined in the latter else clauses

here is an adjusted version which also takes the variants into account

tailwind.config.js

const plugin = require('tailwindcss/plugin')

const rgba = ({ addUtilities, theme, variants }) => {
  const regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i
  const colors = theme('colors', [])
  const newColors = {}
  const nms = {
    '.1': '10',
    '.2': '20',
    '.3': '30',
    '.4': '40',
    '.5': '50',
    '.6': '60',
    '.7': '70',
    '.8': '80',
    '.9': '90'
  }
  const hexToRgb = (hex) => {
    const result = regex.exec(hex)
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null
  }
  for (const [key, value] of Object.entries(colors)) {
    if (typeof value === 'string') {
      const c = hexToRgb(value)

      if (c !== null) {
        for (const [o, v] of Object.entries(nms)) {
          newColors[`.bg-${key}-${v}`] = {
            'background-color': `rgba(${c.r},${c.g},${c.b}, ${o})`
          }
        }
      }
    } else {
      for (const [subKey, subValue] of Object.entries(value)) {
        const c = hexToRgb(subValue)

        if (c !== null) {
          for (const [o, v] of Object.entries(nms)) {
            newColors[`.bg-${key}-${subKey}-${v}`] = {
              'background-color': `rgba(${c.r},${c.g},${c.b}, ${o})`
            }
          }
        }
      }
    }
  }
  addUtilities(newColors, {
    variants: variants('backgroundColor')
  })
}

module.exports = {
  // ...
  plugins: [
    plugin(rgba)
  ]
  // ...
}

const hexReg = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})/i

/**
 * Convert hex color to rgb
 * @param hex
 * @returns {{r: number, b: number, g: number}|null}
 */
function hexToRgb (hex) {
  const result = hexReg.exec(hex)
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null
}

function mountRgbaString({ r, g, b, a }) {
  return `rgba(${r}, ${g}, ${b}, ${a})`
}

function makeRgbaColors(colors = {}, opacities = {}) {
  if (typeof colors !== 'object' || typeof opacities !== 'object') {
    return {}
  }

  return Object.keys(colors).reduce((newColors, colorName) => {
    const rgb = hexToRgb(colors[colorName])

    if (rgb === null) {
      return newColors
    }

    Object.keys(opacities).forEach((opacityAlias) => {
      rgb['a'] = opacities[opacityAlias]
      newColors[`:root`] = {
        ...newColors[':root'],
        [`--${colorName}-${opacityAlias}`]: mountRgbaString(rgb)
      }
      newColors[`.bg-${colorName}-${opacityAlias}`] = {
        'background-color': mountRgbaString(rgb)
      }
      newColors[`.text-${colorName}-${opacityAlias}`] = {
        'color': mountRgbaString(rgb)
      }
    })

    return newColors
  }, {})
}

function rgbaPlugin({ addUtilities, theme, variants }) {
  addUtilities(
    makeRgbaColors(
      theme('colors', {}),
      {
        '400': '.82',
        '300': '.45',
        '200': '.1',
        '100': '.04',
      },
    ), {
      variants: variants('backgroundColor')
    }
  )
}

module.exports = {
  rgbaPlugin
}

Improves, add text color, background color, custom properties, and accept params.