class 动态创建 class 名称时不显示任意值

Question

我有一个很奇怪的问题：我想在计算值内动态填充 after: 伪元素的内容。

有趣的是，如果在返回对象之前键是字符串文字，它会起作用，但如果字符串是在属性中创建的，然后在返回它之前添加到对象中，则不起作用。

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. 
},

此外，此问题仅在使用打包版本的 tailwind 时存在，但在使用 cdn 版本时不会存在。有谁知道为什么会这样，您是否有其他方法的指示？

Answer 1

编辑：

所以我刚刚找到了这个问题的原因。 tailwindcss 使用 purgeCSS 库，该库无法使用由字符串连接创建的动态类。

Optimizing for Production

我通过各种不同的方法解决了这个问题。

通过 v-bind 将 content: 样式属性绑定到 ::after 元素上也不起作用，这很令人难过，但幸运的是我们可以将我们想要的值绑定到数据属性并在 CSS 中使用它来设置内容。

<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 动态创建 class 名称时不显示任意值

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

vue.js

tailwind-css

vuejs3