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

Question

i've tried to using reusable component on vue js like pass props class name. In my case, i'm using tailwind css, how can i pass class name using props. Thanks guys, Have nice weekend:)

this is my html router tag

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

this is my props

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 }
},

this is my computed

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

Answer 1

how's good?
Do you really need this 'fst' prefix?

If so, you'll need to configure this fst as a prefix in the tailwind.config.js file, to do so you can check this part of the doc:
#Tailwind prefix

But If you want to use custom colors instead you'd want to checkout this part of doc:
#Tailwind custom colors