反應性 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 文檔。