vue.js - 在可重用的 VueJS 组件中覆盖 Tailwind CSS 类

Question

我使用 TailwindCSS 创建了一个 VueJS 按钮组件。我的目标是为该按钮组件提供一些基本样式(使用 tailwindcss 类)，并在需要时选择覆盖它们(再次，使用 tailwind css 类)。
例如，这里是 Button 的简化版本。零件:

// Button.vue

<template>
  <button class="bg-green-500 text-white py-2 px-4 rounded">
    Click Me
  </button>
</template>

这是我在另一个文件中使用该组件的示例:

// index.vue

<Button></Button>
<Button class="bg-red-600"></Button>
<Button class="bg-blue-600"></Button>

问题是这只是成功的一半。也就是说，bg-blue-600确实覆盖了 bg-green-500我在 Button.vue 中设置为默认值.但是bg-red-600 不是 覆盖背景颜色(大概是因为 bg-red-600 在 css 源代码中出现得更早。
因此，我想知道如何正确设置它？也就是说，我怎么给Button组件一些基本样式(同样，使用tailwind css 类)，同时还提供使用tailwind css 类覆盖这些样式的选项。
谢谢。

Answer 1

这是因为您的组件属性 class在 Button不痒到 html button .为此，只需像这样将属性绑定(bind)到 child

<button v-bind="$attrs"...>

这将使您在 Button 上指定的所有属性(不是 Prop )绑定(bind)到 html 按钮。
话虽如此，我个人更喜欢使用 @apply 来制作按钮类。指令并在我的项目中重用它。