TailwindCSS | how to set correct color inside config file to be rendered as RGB/RGBA

Question

Tailwind 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 Tailwind 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

Answer 1

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