class with arbitrary value not showing when class name is created dynamically

Question

I have quite an odd problem: I want to dynamically fill the content of an after: pseudo element within a computed value.

The fun part is, that it works if the key is a string literal before returning the object, but not if the string is created within the property and then added to the object before returning it.

staticClassObject() {
  return {
    'after:content-["04:00"]': true,
    "after:h-8": true,
    "after:w-min": true,
    "after:p-1": true,
    "after:rounded-full": true,
    "after:border": true,
    "after:border-ns-black": true,
    "after:bg-white": true,
    "after:-translate-x-1/2": true,
    "after:block": true,
  };
   // this one works as expected, the after element has the text '04:00' showing.
},
dynamicClassObject() {
  const content = '04:00';
  const dynamicKey = `after:content-["${content}"]`;
  const object = {
    "after:h-8": true,
    "after:w-min": true,
    "after:p-1": true,
    "after:rounded-full": true,
    "after:border": true,
    "after:border-ns-black": true,
    "after:bg-white": true,
    "after:-translate-x-1/2": true,
    "after:block": true,
  }
  object[dynamicKey] = true;
  return object;
  // This one doesn't work, even though it's the same object as the one above. 
},

furthermore this problem only persists when using a package version of tailwind, but not when using a cdn version of it. Does anyone know why this happens, and do you have a pointer to a different approach?

How are you using this object then? Maybe have a look at the SFC style features: https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css — Thomas, Jan 13 '22 at 13:56
@Thomas I bind it as usually `:class="dynamicClassObject"`. also binding content on the after object doesn't seem to work. — D.Schaller, Jan 13 '22 at 14:00

D.Schaller · Accepted Answer · 2022-01-18T10:14:37.340

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>

class with arbitrary value not showing when class name is created dynamically

1 Answers1