I'm using Tailwinds CSS and classNames package.

I'm rendering out 2 divs and I want to check if one of them has am active class, then set a specific background color className bg-[#000] to it.

• I tried using 'bg-[#000]': 'active' check but this just inserts the background color on all elements.

How can we set a specific style to an active element with Tailwind and classNames?

Thank you!

Code:

list.map((page, index) => {
  return ( 
  <div 
    key = {index}
    onClick = {() => setCurrentListIdx(index)}
    className = {
      classNames('bullets__item m-1.5 h-2 w-2 cursor-pointer rounded-full bg-[#e0e0e0]', 
      {
        active: currentListIdx === +index,
        'bg-[#000]': 'active',
       }
      )}
    ></div>
  )
})