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

Posted 2023-03-07

【中文标题】带有 Vue js 道具的反应式 Tailwind 类

【英文标题】：Reactive Tailwind class with props on Vue js

【发布时间】：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: [],

这是我的 ma​​ster.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，仍然无法正常工作，我尝试在返回时使用前缀但仍然相同

【参考方案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呈现