You seemingly can't use (certain???) hex/rgb phrases as colors with tailwind, I've had this issue too.
The best work-around for me was utilizing the style
property to set colors (especially if doing it dynamically).
<div style={{ backgroundColor: color || COLORS.primary }} />