How to set correct shadow-color inside config to be rendered as RGB/RGBA?

TailwindCSS provides good option to get value from config inside another config object:

module.exports = {
  theme: {
    colors: {
      primary: 'red'
    },
    extend: {
      colors: theme => ({
        secondary: theme('colors.primary') // will be red 
      })
    }
  }
}

But this doesn't work when I want to create classes using RGBA. I want to create something like:

module.exports = {
  theme: {
    colors: {
      primary: 'red'
    },
    extend: {
      boxShadow: theme => ({
        extra: "0 0 999px rgba(theme('colors.primary'), .25))"
      }),
    }
  }
}

This will render 0 0 999px rgba(red, .25) which is not correct CSS value - you need to pass red as 255, 0, 0. But I want to use colors.primary as it was defined in my config.

I know TailwindCSS has it's own build utils for converting colors like asRgba, withAlphaVariable. For example, when you use text-white Tailwind renders it as color: rgba(255, 255, 255, var(--tw-text-opacity));. But how can I use it?

So basically how can I achieve this - pass color key from my config into another property and get rendered it as RGB/RGBA?

Update: I want third square (TW) to work as others

DEMO

I think your idea was wrong, because tailwind colors is defined with HEX number, but you trying to use it into RGBA type, so I think you need to convert firstly if you want to make your way. Anyway let us know your success :)

check this doc