Combined transformations: rotate and translate-y in creating circular text

[ajl20]

Noob to Tailwind CSS. Trying to replicate circular text as shown in 'Circular text with CSS?' https://dev.to/jh3y/circular-text-with-css-57jf but using Tailwind CSS. That approach relies on rotate then translate in the direction specified after rotation. The issue I have encountered has been flagged here https://stackoverflow.com/questions/69816012/multiple-transform-function-on-tailwind-css. I don't think the solution suggested there will work in this case. I attach my complete html file
CircularText.html. The key lines are

    RING.innerHTML = RING.innerText.split("").map(
        (char, i) =>
        `<span class="absolute left-[50%] rotate-[${i*INNER_ANGLE}rad] translate-y-[${RADIUS}ch]">${char}</span>\`
      ).join("")

but this does not produce the result achieved with CSS. Suspect it is possible to kludge a solution based on the actual implementation of rotate and translate-y in Tailwind CSS - but what is the correct way to do this, please?

[wongjn]

With Tailwind CSS, you shouldn't construct class names dynamically. Even though this will work here since you are using the browser CDN, it may cause problems down the line.

Specifically here, I'd use the style attribute to set the transform property: https://jsfiddle.net/4kpacyrj/
This allows you to explicitly set the order you desire.

Tailwind's rotate-* and translate-* class names set rotate and translate CSS properties respectively. There does not seem to be a way to reorder how these are applied - the order is explicitly defined in the spec:

3. Translate by the computed X, Y, and Z values of translate.
4. Rotate by the computed about the specified axis of rotate.

[ajl20]

Thank you for speedy response - style attribute tip very helpful! Much appreciated.