Changing div class with JS (using Tailwind CSS)

Question

I've got the problem with my js code. The value is showing on the screen correctly and class is correctly changing but it ain't working. Rounded parameter isn't doing anything, anything is changing in my div. Can someone helps me? I'm using tailwind css framework.

var elem = document.querySelector('input[type="range"]');

  var rangeValue = function(){
    var newValue = elem.value;
    var target = document.querySelector('.value');
    target.innerHTML = newValue;
    var element = document.getElementById('cube')
    element.className = 'h-[400px] w-[400px] gradient-2 p-2 duration-200 rounded-['+newValue+'%]'
  }

  elem.addEventListener("input", rangeValue);

Answer 1

You can't interpolate tailwind classes like this.

More info