我如何使用 Vue 上的 Props 使用 class Tailwind

Question

我尝试在 vue js 上使用可重用组件，例如传递道具 class 名称。 就我而言，我使用的是顺风 css，如何使用道具传递 class 名称。 谢谢大家，周末愉快：）

这是我的 html路由器标签

router-link.button-filled(
 :to="routeName"
 :title="title"
 :class="customClass"
)
 | {{ title }}

这是我的道具

props: {
  routeName: { default: "/", type: String },
  title: { default: "Button", type: String },
  size: { default: "md", type: String },
  backgroundColor: { default: "red-500", type: String },
  borderColor: { default: "red-500", type: String }
},

这是我的计算

computed: {
  customClass() {
    return [
      "fst-bg-" + this.backgroundColor,
      "fst-border-" + this.borderColor
    ];
  }
}

Answer 1

怎么样？
你真的需要这个'fst'前缀吗？

如果是这样，您需要将此 fst 配置为tailwind.config.js文件中的前缀，为此您可以检查文档的这一部分：
#顺风前缀

但是，如果您想使用自定义 colors 代替，您需要查看文档的这一部分：
#顺风定制 colors