如何让Vue优先使用传入的类覆盖组件原有同类型Tailwind类？

我有一个MyButton.vue组件，代码如下：

<button class="text-sm font-roboto justify-center text-red-500">
  <slot></slot>
</button>

在项目中使用该组件时，传入新的Tailwind类：

<MyButton class="justify-start text-gray-100">click me</MyButton>

但当前渲染结果中类名是叠加状态：

<button class="text-sm font-roboto justify-center text-red-500 justify-start text-gray-100">
  click me
</button>

由于HTML类的优先级规则，后传入的justify-start、text-gray-100被原有类覆盖无法生效。需要实现自动移除同类型的原有Tailwind类，替换为传入的类，最终期望渲染结果为：

<button class="text-sm font-roboto justify-start text-gray-100">
  click me
</button>

且该逻辑需适配所有Tailwind类类型，如text-*、font-*、shadow-*等。

解决方案：使用tailwind-merge处理类名合并 #

tailwind-merge是专门针对Tailwind CSS开发的类名合并工具，能智能识别同类型的Tailwind类并保留后传入的类，完美解决类名冲突问题。

1. 安装依赖

npm install tailwind-merge
# 或使用yarn
yarn add tailwind-merge

2. 修改MyButton.vue组件
   利用Vue的$attrs获取外部传入的类名，结合twMerge函数合并基础类与传入类：

<script setup>
import { twMerge } from 'tailwind-merge'

// 定义组件的基础类名
const baseClasses = 'text-sm font-roboto justify-center text-red-500'
// 合并基础类和外部传入的类
const mergedClasses = twMerge(baseClasses, $attrs.class)
// 移除$attrs中的class属性，避免重复渲染
const { class: _, ...restAttrs } = $attrs
</script>

<template>
  <button :class="mergedClasses" v-bind="restAttrs">
    <slot></slot>
  </button>
</template>

3. 效果说明
   twMerge会自动识别同类型的Tailwind类：

• 对于justify-center和justify-start（同属flex布局的justify-content类），保留后传入的justify-start
• 对于text-red-500和text-gray-100（同属文本颜色类），保留后传入的text-gray-100
• 无冲突的类（如text-sm、font-roboto）会被完整保留

修改后再使用组件，就能得到期望的渲染结果，且适配所有Tailwind类类型的冲突处理。

内容的提问来源于stack exchange，提问作者Martin Zeltin