带有 Vue js 道具的反应式 Tailwind 类答案

【问题标题】：Reactive Tailwind class with props on Vue js带有 Vue js 道具的反应式 Tailwind 类
【发布时间】：2021-03-30 09:29:18
【问题描述】：

我尝试在 vue js 上使用可重用组件，例如传递道具类名。就我而言，我使用的是顺风 css。如何使用 props 传递类名？

这是我的代码

<template lang="pug">
  router-link.button-filled(
      :to="routeName"
      :title="title"
      :class="customClass"
    )
    | {{ title }}
</template>

<script>
export default {
  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 [
        "bg-" + this.backgroundColor,
        "border-" + this.borderColor
      ];
    }
  }
};
</script>

这是我的 tailwind.config.js

module.exports = {
  prefix: 'fst-',
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

这是我的 master.sass

@tailwindcss base

@tailwindcss components
@import "./components/button-filled"
@import "./components/button-outlined"

@tailwindcss utilities

这是我使用道具通过课程后的结果。没有任何改变，但在 html 属性上加载了类成功。

【问题讨论】：

请分享您的 tailwind.config 和主 css 文件
嗨@BoussadjraBrahim 欢迎回来，你好吗:)，我已经用tailwind.config.js 和master.sass 更新了我的问题，谢谢:)
将@tailwindcss utilities放在@tailwindcss components之后
嗨@BoussadjraBrahim，仍然无法正常工作，我尝试在返回时使用前缀但仍然相同

标签： javascript vue.js tailwind-css

【解决方案1】：

我注意到的几件事：

您在 tailwind.config.js 中指定了自定义前缀。这意味着您的所有顺风类都应以fst- 为前缀。例如，在您的情况下，text-green-500 将是 fst--text-green-500。
您正在以一种 PurgeCSS 将忽略的方式连接类名。在为生产构建 CSS 时，PostCSS 会遍历所有文件并根据 Tailwind 配置查找 Tailwind 类名，并删除所有未使用的类名。因此，在使用 Tailwind 时，您应该完整地编写您的类名，而不是连接它们。

摘自 Optimizing for Production 下的 Tailwind 文档。

【讨论】：

嗨@Mysterywood，是的，当然我在我的sass文件上使用前缀，就像.button-filled @apply fst-border-2一样，但我的问题是添加新类而不是由tailwind呈现