[Vuejs]-Class with arbitrary value not showing when class name is created dynamically

by

0👍

✅

EDIT:

So I just came across the reason for this problem.
tailwindcss uses the purgeCSS library which is not able to use dynamic classes created by string-concatenating.

Optimizing for Production

I solved the problem after various different approaches.

Binding the content: style attribute via v-bind on an ::after element didn’t work as well, which was quite sad, but fortunately we can bind our desired value to a data-attribute and use this in CSS to set the content.

<template>
  <div id="target" :data-text="contentText"></div>
</template>

<script>
[...]
computed() {
  contentText() {
    return 'someText';
  }
}
[...]
</script>

<style scoped>
  #target::after {
    content: attr(data-text);
  }
</style>

Leave a comment