Question 231477 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – problem with dynamically adding attribute to tailwindcc classname

so basically problem is simple but I stuck and can not figure out the reason.
anybody can help with this?

I am trying to add tailwind attribute into className dynamically

<div className={`h-2.5 rounded-full ${myfunc(value)`} > Random staff </div>`

and I have simple myfunc which returns string:

// returned value of this function does not work
function myfunc(value) {
  const v = "w-["+"value.toString()"+"%]"
  return v
}

is there anything I am missing, why dynamically constructed string does not work as it supposed to work?

I tried this simplified function, which does what is expected:

// but if i simple return string it works
function myfunc(value) {
  const v = "w-[10%]"
  return v
}

I am expecting some advise how to solve it, or some explanation what I am doing wrong.

regards
Noro

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to the post Conditionally set background color in React component with Tailwind CSS

    I used style instead tailwind and it worked fine. In case someone is interested in the solution:

    <div className={`h-2.5 rounded-full `} 
style={{width:myfunc(value)}}> Random staff </div>

//where my func is
function myfunc(value) {
  return (value * 100).toFixed(2).toString() + "%"
}

  2. 0

    Tailwind doesn’t generate CSS rules for classes it doesn’t find in your code; if you’re dynamically interpolating class names, Tailwind won’t know what rules to generate for you.

    The official tailwind docs simply say to not generate class names dynamically, and to always use complete strings: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search