CODEWITHSUNDEEP
reactjstailwind-css
Jaden derulo
Jaden derulo

Reputation: 251

TailwindCSS custom background color not working

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?

Upvotes: 2

Views: 8398

Answers (1)

Ivo
Ivo

Reputation: 2510

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)

Upvotes: 11

Related Questions