Multiple transform function on Tailwind CSS

Question

I would like to apply several tranform functions to Tailwind CSS for one element order from left to right like this :

transform: rotate(45deg) translateX(50%);

But if I apply class like this, rotation is applied last.

class="transform rotate-45 translate-x-1/2"

A link to illustrate my problem :
Play.tailwindcss.com/R6PBP2OHPy

Answer 1

I solved this by rotating the parent div element and translating the child element. Not the most elegant solution but it works.

<div class="rotate-45">
  <img class="translate-x-12"/>
</div>

https://play.tailwindcss.com/dvZnRRaKq1