Dynamic changes of className are not reflected upon rerender

[Muchaszewski]

When the style is dynamic with the use of the if statement directly in the render method, its changes are not reflected upon state change.

Example:

function Foo() {
  const [state, setState] = useState('none');

    return (
      <button className={(state !== 'game' ? ' class1' : ' class2')}
        onClick={() => (state !== 'game' ? setState('game') : setState('none'))}>
          Test
      </button>
    );
}

Actual result
Nothing happens

Expected result
Assuming class1 should set scale to 125 and class2 should set scale to 100
https://user-images.githubusercontent.com/5092066/165640284-ad62f2dc-0217-46c2-8751-60ed89688658.mp4

[KurtGokhan]

Can't reproduce. Maybe there is another error, like parsing is failing? Did you try with a style other than scale? Btw there is no transform in ReactUnity. There are separate properties for translate, scale and rotate. I guess this may be a problem for Tailwind.

[Muchaszewski]

You are right, my bad :(

[KurtGokhan]

transform property is now available. It is a shorthand for translate scale and rotate. Operations like matrix, perspective and skew won't work. Also % and px cannot be mixed for same dimension of translate.