1

我正在尝试开发一些组件，供我们在 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>
4

1 回答 1

1

您需要添加完整的类名称。
由于w-1/2您的代码中没有，TW 不会生成该类。

您可以通过将类添加到 safelist来解决此问题。
文档：https ://tailwindcss.com/docs/content-configuration#safelisting-classes

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

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

于 2022-01-21T19:06:13.817 回答