反应性 Tailwind class 与 Vue js 上的道具

Question

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

这是我的代码

<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: [],
}

这是我的主人。sass

@tailwindcss base

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

@tailwindcss utilities

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

Answer 1

我注意到的几件事：

1. 您在tailwind.config.js中指定了自定义前缀。 这意味着你所有的顺风类都应该以fst-为前缀。 例如，在您的情况下， text-green-500将是fst--text-green-500 。

2. 您以 PurgeCSS 将忽略的方式连接 class 名称。 在为生产构建 CSS 时，PostCSS 会检查所有文件并根据 Tailwind 配置查找 Tailwind class 名称，并删除所有未使用的 class 名称。 因此，在使用 Tailwind 时，您应该完整地编写 class 名称，而不是连接它们。

摘自Optimizing for Production下的 Tailwind 文档。