Pass variables in tailwind class string
Answered
Northeast Congo Lion posted this in #help-forum
Northeast Congo LionOP
Hi i'm trying to display a sequence of buttons of different color
{colors.map((color) => {
const isActive = selectedColors.includes(color.id.toString())
const bgColor =
return (
<Button
key={color.id}
className={bgColor}
onClick={() => {
toggleColor(color.id.toString())
}}
/>
)
})}
if i replace color.attributes.hex with a random hex code it works
{colors.map((color) => {
const isActive = selectedColors.includes(color.id.toString())
const bgColor =
w-10 h-10 bg-[${color.attributes.hex}]return (
<Button
key={color.id}
className={bgColor}
onClick={() => {
toggleColor(color.id.toString())
}}
/>
)
})}
if i replace color.attributes.hex with a random hex code it works
Answered by joulev
no it's impossible, tailwind string classes must be statically analysable https://tailwindcss.com/docs/content-configuration#dynamic-class-names
1 Reply
@Northeast Congo Lion Hi i'm trying to display a sequence of buttons of different color
{colors.map((color) => {
const isActive = selectedColors.includes(color.id.toString())
const bgColor = `w-10 h-10 bg-[${color.attributes.hex}]`
return (
<Button
key={color.id}
className={bgColor}
onClick={() => {
toggleColor(color.id.toString())
}}
/>
)
})}
if i replace color.attributes.hex with a random hex code it works
no it's impossible, tailwind string classes must be statically analysable https://tailwindcss.com/docs/content-configuration#dynamic-class-names
Answer