Next.js Discord

Discord Forum

Pass HEX color with props does not work with Tailwindcss

Answered
Dwarf Hotot posted this in #help-forum
Open in Discord
Dwarf HototOP
1. Why does not my solution work?
2. How can I pass HEX color with props and use it in child component?
3.How can I set a default color for bgHexColor if no value passed from page.tsx ?
4. Are there a better approach for this scenario?

I have created a sandbox to make it easier for you to help me.
https://codesandbox.io/p/sandbox/musing-water-fr8l5h?file=%2Fapp%2Fpage.tsx%3A37%2C14
Answered by Galgo Español
To do what you want to achieve you'd need to use the styles property
View full answer

7 Replies

davdixyz
You can't use dynamic classnames like bg-[${bgHexColor}]
Galgo Español
Stuff put in brackets in tailwind is computed at compile time
Galgo Español
To do what you want to achieve you'd need to use the styles property
Answer
Galgo Español
If you only have a limited amount of colors though, you could get away with defining them in your tailwind config
Dwarf HototOP
Thanks for answering @davdixyz @Galgo Español .
My hope was to pass what ever color to the component.
I will have a look at the suggestion with styles property. 👀
Dwarf HototOP
I went with this approach for now, thanks @Galgo Español 
const ProjectCard = ({
  imageURL,
  projectName,
  projectShortInfo,
  projectURL,
  bgHexColor = '#04013A',
}: Props) => {
  return (
    <Link
      href={projectURL}
      style={{ backgroundColor: bgHexColor }}
      className={`
       relative rounded-xl p-6 transition-all hover:scale-105 hover:rotate-2`}
    >Some more code...