我如何使用 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