Tailwind css V3- custom colors with string interpolation

I've just upgraded tailwind in my react project to get rid of this warning:

warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate this warning.
warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources

As I understand it the 'purge' property is now replaced with 'content'. I replaced the property name and for the most part everything worked the same. However in my old Tailwind config file I needed to safelist a bunch of colors in order to make them show up. Without the purge property to use I don't know where to put the safelist

module.exports = {
  mode: 'jit',

  purge: {
    content: ['./src/**/*.{js,jsx,ts,tsx}'],
    options: {
      safelist: [
        'bg-[#ffffff]',
        'bg-[#d9ffff]',
        'bg-[#cc80ff]',
        'bg-[#c2ff00]',
        'bg-[#ffb5b5]',
        'bg-[#909090]',
        'bg-[#3050f8]',
        'bg-[#ff0d0d]',
        'bg-[#90e050]',
        'bg-[#b3e3f5]',
        'bg-[#ab5cf2]',
        'bg-[#8aff00]',
        'bg-[#bfa6a6]',
        'bg-[#f0c8a0]'
      ],
    },
  },
  theme: {
    extend: {},
  },
  plugins: [],
};

The code that requires the safelist to run is interpolating the properties into the class name of an element:

<div className={`text-white ${props.bg}`}></div>