Correct way of dynamically binding a tailwind classes in vuejs3/nuxtjs3?

Question

does someone of you know, what the correct way of dynamically binding the content tailwind class in vuejs3/nuxtjs3 is? Let's assume, that const isExpanded = true

<h1 :class="{'after:content-[`:`]' : isExpanded}">Hello</h1>

I have tried it with backticks (`) but it ain't working.

Please help.

Answer 1

Use \ to escape the inner apostrophes ' so they don't prematurely close the outer string

<h1 :class="{'after:content-[\'_↗\']' : isExpanded}">Hello</h1>