Code Demo

When I try to create constants for reusing some colour components, I face the issue that the colours are not applied correctly. I have attached the demo for the same as well as the screenshot

But when used the CSS colour values directly in the tailwind it works,

for example

<button
    className={`text-[${WHITE}] border border-[${YELLOW}] px-5 h-12 ${josefinSans.className}`} onClick={onClick}>
    <span>{text}</span>
</button>

does not works

but

<button
    className={`text-[#FFF8F5] border border-[#E1B168] px-5 h-12 ${josefinSans.className}`} onClick={onClick}>
    <span>{text}</span>
</button>

works

Please explain the issue or what is wrong on my side or any possible solution