Tailwind class 是否可以通过 Storyblok 进行绑定？

Question

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

举个例子，我正在通过 storyblok 传递 width 道具，给出 w-1/2 的值，这是一个 Tailwind class。正如您在右侧看到的，class 很好地应用于元素，但对页面没有实际影响。我已经对许多其他 classes 进行了相同的尝试（无论是背景颜色还是边框颜色还是文本样式等，我都尝试使用 Tailwind classes 作为来自 Storyblok 的道具，但没有用）。

我唯一的猜测是 Nuxt 是一个服务器端应用程序，CSS 在构建时编译，因此任何新的 class 绑定到 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 不会生成 class.

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

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

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

Tailwind class 是否可以通过 Storyblok 进行绑定？

Is Tailwind class binding possible through Storyblok?

vue.js

storyblok

nuxt.js

tailwind-css