Dynamic class + variables in VueJS / Tailwind

Question

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

If i delete : ${show} yes but I need this to make the transition work (the value of show depend on scroll position). — David
– David, Commented Nov 4, 2020 at 22:12
If i use v-if=‘show’ for ex it will work but without the wanted transition. — David
– David, Commented Nov 4, 2020 at 22:16
i am sorry i am not familiar with tailwind, i am trying to understand what do you want to see in $show ? just show ? — omerS
– omerS, Commented Nov 4, 2020 at 22:24

Rutz · Accepted Answer · 2020-11-05 07:15:26Z

14

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>

edited Nov 5, 2020 at 7:15

answered Nov 5, 2020 at 3:05

Rutz

2163 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

merlindru Over a year ago

Note that you shouldn't use interpolated class names with tailwind. Always use e.g. w-8/12 over w-{percent}/12: tailwindcss.com/docs/content-configuration#dynamic-class-names

Collectives™ on Stack Overflow

Dynamic class + variables in VueJS / Tailwind

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related