tailwind css Classes are not included if they are type in a string vue

Question

i'm use TailwindCss with vue

if i write component he has a prop like color:

<script setup>
defineProps({
    color: String // give me like: green
})
</script>

<div class="`bg-${color}-500`"> </div>

But when I see the result the color does not appear because Tailwind did not understand that this color was used

lpetrucci · Accepted Answer · 2021-10-21 10:09:53Z

3

Adding on to Markiesch, Tailwind suggests not writing classes this way as they are not recognised by the purger on build, which means the class as you wrote it will most likely not work in production.

Tailwind docs state:

answered Oct 21, 2021 at 10:09

lpetrucci

1,7896 gold badges31 silver badges55 bronze badges

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

Comments

Markiesch · Accepted Answer · 2022-05-12 09:39:57Z

2

The class is not applying because the browser doesnt understand the syntax bg-${color}-500. Use the build-in Vue feature v-bind:class="" or using the shorthand : to make this work

<div :class="`bg-${color}-500`"> </div>

edited May 12, 2022 at 9:39

answered Oct 21, 2021 at 10:04

Markiesch

7594 silver badges11 bronze badges

Collectives™ on Stack Overflow

tailwind css Classes are not included if they are type in a string vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related