类在使用字符串文字``space x-${props.bgSize}‘时未导出

Question

我正在使用Vite & Vuejs3开发一个应用程序，在那里我设置了一个条件类。在这里，我有一个顺风(unocss)类，它也是有条件地用变量创建的，如……

:class="[dirHor ? `flex-row bottom-0 left-50% -translate-x-50% mb-6 space-x-${props.bgSize}` : `flex-col right-0 top-50% -translate-y-50% mr-6 space-y-${props.bgSize}`]"

例如，这里的space-x-${props.bgSize}没有导出。当您将变量硬编码到类(如space-x-8 )中时，它确实可以工作。

在这里，字符串文本似乎是正确实现的，并且在app (html)中可用，但是这些类在导出时还没有决定，所以这些类是不可用的。例如(作为测试，我将数字24添加到字符串文本中)：

 <div
    class="absolute rounded-full"
    :class="[`w-${24} h-${24} -translate-x-${(24 / 2) - 1} -translate-y-${(24) / 2}`]"
  />

截图:来自这个div的DevTools html屏幕截图

但是，w-24和h-24的类似乎没有导出

我希望能够使用参数来控制这些类，这样我仍然可以根据UI配置来确定样式。我能做些什么来解决这个问题吗？

谢谢彼得

Answer 1

TailwindCSS不允许动态生成类。因此，当您使用以下方法生成类…时

`space-x-${props.bgSize}`

…TailwindCSS不会把它作为一个有效的TailwindCSS类，因此不会产生必要的CSS。

相反，必须将类的全名包含在源代码中。可以通过如下所示的函数返回全部值

function  myFunc(val) {
return "space-x-"+val ;
}

当val是您的大小值时，您将在这里传递24。

然后您可以像这样在DOM中使用它们

 <div
    class="absolute rounded-full"
    :class=`${myFunc(props.bgSize)}`
  />

通过这样做，每个类的整个字符串都在源代码中，因此TailwindCSS将知道如何生成适用的CSS。

阅读更多：https://tailwindcss.com/docs/content-configuration#class-detection-in-depth