Dynamic class + variables in VueJS / Tailwind

user_3918265 0
Viewed 6072

I'm trying to add dynamic variables (props) on a Tailwind class but something is wrong :

:class="`w-${percent}/12: ${show}`"

This is the output of this code :

<div class="w-0 h-2 transition-all duration-1000 ease-out bg-indigo-600 rounded-lg w-11/12: true"></div>

I don't understand why ':true' is added.

Thanks for your help.

Nb: https://fr.vuejs.org/v2/guide/class-and-style.html

tailwind-css vue.js dynamic variables
1 Answers

Because you use template literals which returns the string. So show is boolean true and it returns "true" as a string.

If you want to toggle class according to show variable, you must use object way.

<div
  class="w-0 h-2 transition-all duration-1000 ease-out bg-indigo-600 rounded-lg"
  :class="{ [`w-${percent}/12`]: show }"
>
  YOUR CONTENT
</div>
user_15972950
Related