是否可以通过 Storyblok 绑定 Tailwind 类？

Question

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

例如， 我正在通过 storyblok 传递 width 道具，给出 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

您需要添加Complete Class Names。
由于您的代码中没有w-1/2，TW 不会生成该类。

您可以通过adding the class to safelist 解决此问题。
文档：https://tailwindcss.com/docs/content-configuration#safelisting-classes

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

然后w-1/2 实用程序将生成，无论它是否显示在您的代码中。