So, I am currently using tailwindcss for a website I am building and I wanted to make a small circle with a custom color. Now I used this method
<span className={`h-3 w-3 rounded-full bg-[#${role.color.toString(16)}]`} />
Basically , role.color.toString(16) returns a hex code. I have checked it and yes it does send a valid hex code. Now when I looked at the website, it doesn't add color. Does anybody know the solution to this problem?
Tailwind works based on a color palette. The default one is included and you can adapt yours in the tailwind config file as mentioned in the documentation here: https://tailwindcss.com/docs/customizing-colors
However tailwind is not made for dynamic colors, that would go against the principles of tailwind which is 'constraint' (please check this thread for more info: https://github.com/tailwindlabs/tailwindcss/discussions/3065)
However there is an easy solution to your problem, add an inline styling
<span className="h-3 w-3 rounded-full" style={{ backgroundColor: `#${role.color.toString(16)}`}} />
ReEdit: Thought there was a solution with JIT and modern tailwind version but event with JIT, truly dynamic values are not manageable (https://v2.tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support)
