我如何在 Vue 上使用 Props 使用类 Tailwind答案

【问题标题】：How can i use class Tailwind using Props on Vue我如何在 Vue 上使用 Props 使用类 Tailwind
【发布时间】：2021-03-29 23:10:45
【问题描述】：

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

这是我的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
    ];
  }
}

【问题讨论】：

查看即时模式中的“动态值”（Tailwind CSS 版本 v2.1+） - 链接：tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support - 建议“不能从动态值计算任意值。 "此外，所有 CSS 必须是可清除的 b/c PurgeCSS “不会尝试解析您的 HTML 并查找类属性或动态执行您的 JavaScript — 它只是在整个文件中查找与此正则表达式匹配的任何字符串”（来源： tailwindcss.com/docs/…)。祝你好运！

标签： javascript vue.js tailwind-css

【解决方案1】：

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

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

但是，如果您想使用自定义颜色，则需要查看文档的这一部分：
#Tailwind custom colors

【讨论】：

嗨@felipemm 好的，谢谢！。我在tailwind.config.js文件上进行了配置..这也可以..但不适用于道具一..我尝试在计算返回中添加这些'fst'前缀但不起作用，道具的任何解决方案？谢谢:)
这很奇怪，它应该按预期工作。您是否尝试过直接使用 fst-bg-red-500 ？或者不使用计算，而是使用您在安装/创建的生命周期中设置的方法或变量？可能有助于我们理解这种行为