Why doesn't the background color change with the color variable value?

Tailwind generates classnames at compile time, so you can't use arbitrary classname in runtime. This is also a very bad practicie. If you need to change background color often, you should not use a class for each of them.

Instead, use inline styling:

<div className="w-20 h-20 mx-auto mb-4" style={{backgroundColor: color}}>{color}</div>