Tailwind类可以通过Storyblok绑定吗？

Question

我正在尝试开发一些组件，这些组件将由Storyblok中的内容编辑器使用，并且有一个用例，我们希望通过来自Storyblok组件的道具来定义布局属性(使用Tailwind的类)。

举个例子

我把width的道具传递给storyblok，给出了一个w-1/2的值，这是一个Tailwind类。正如您在右边看到的那样，类对元素应用得很好，但对页面没有实际影响。我也尝试过许多其他类(背景或边框颜色或文本样式等等)，尝试使用Tailwind类作为Storyblok的道具，但没有起作用)。

我唯一的猜测是，Nuxt是一个服务器端应用程序，CSS是在构建时编译的，因此任何绑定到DOM的新类都不会反映它们所代表的实际CSS。是这样的吗？如果是的话，有没有办法让这件事发生并发挥作用？

widthSetter组件的代码非常简单

<template>
  {{blok.width}}
  <div v-editable="blok" :class="[ blok.width ]">
    <component
      v-for="value in blok.blocks"
      :key="value._uid"
      :is="value.component"
      :blok="value"
    />
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  blok: {
    type: Object,
    required: true,
  },
})
</script>

Answer 1

您需要添加完全类名。

由于代码中没有w-1/2，TW不会生成该类。

您可以通过将类添加到安全列表中解决这个问题。

Doc：https://tailwindcss.com/docs/content-configuration#safelisting-classes

module.exports = {
  safelist: ['w-1/2'],
  //...
}

然后将生成w-1/2实用程序，不管它是否出现在您的代码中。