How to change a Tailwind Class based on React State/Props [duplicate]

Question

I'm trying to do a Progress Bar Component.

I'm using these versions:

"next": "13.4.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"classnames": "^2.3.2",

I want to change the width (Tailwind Class) of Progress Thumb based on currentValue Props, but It does not work. I had this issue before, but I'm trying to find any help just now. And, I'm using classNames() to create better class conditionals

And that's my code:

import classNames from 'classnames'
import React from 'react'

type ProgressBarProps = {
  maxValue?: number
  currentValue: number
  showNumbers?: boolean
  orientation?: 'vertical' | 'horizontal'
}

export const ProgressBar = ({
  currentValue,
  maxValue = 100,
  showNumbers = true,
  orientation = 'vertical',
}: ProgressBarProps) => { 

  return (
    <div
      className={classNames('flex items-center w-full gap-2', {
        'flex-row': orientation === 'horizontal',
        'flex-col': orientation === 'vertical',
      })}
    >

      // -> Progress Wrapper
      <div className="flex items-center w-full h-2 gap-2 rounded-md bg-third-250">

       // -> Progress Thumb
        <div
          className={classNames(`h-full bg-primary-500 `, {
            'rounded-md': maxValue === currentValue,
            'rounded-tl-md rounded-bl-md': maxValue !== currentValue,
            [`w-[${currentValue}%]`]: currentValue,
          })}
        />

      </div>

      // Irrelevant right now
      {renderNumericProgress()}

    </div>
  )
}

That's the result on HTML on the Chrome Console, and as you can see we have the w-[10%] that I'm passing as props to this component

<div class="flex items-center w-full h-2 gap-2 rounded-md bg-third-250">
 <div class="h-full bg-primary-500  rounded-tl-md rounded- 
  bl-md w-[10%]">
 </div>
</div>

I tried, but no success:

• className={`w-[${currentValue}%]`}
• className={classNames(`w-[${currentValue}%]`)}
• className={twMerge(`w-[${currentValue}%]`)}

Answer 1

As per the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Don’t construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full:

Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

You could consider the style attribute instead like:

<div
  className={classNames(`h-full bg-primary-500 `, {
    'rounded-md': maxValue === currentValue,
    'rounded-tl-md rounded-bl-md': maxValue !== currentValue,
  })}
  style={{ width: `${currentValue}%` }}
/>