Vue js 上带有 props 的反应式 Tailwind 类

Question

我尝试过在 vue js 上使用可重用的组件，例如传递 props 类名。就我而言，我使用的是 tailwind 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 属性上。

Answer 1

我注意到的几件事：

1. 您在tailwind.config.js. 这意味着所有的 tailwind 类都应该以fst-. 例如，text-green-500将fst--text-green-500在您的情况下。

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

摘自 Tailwind 文档中的Optimizing for Production。