These tips just solved a big problem for me, figured I would share it here:
I was struggling to make this work:
~H"""
<div class={"ml-[#{@level / 2}rem]"} </div>
"""
But this worked:
~H"""
<div
class="ml-[--left-margin]"
style={"--left-margin: #{@level / 2}rem"}>
</div>
"""
