Class Fallthrough Attribute Merge Function

[V35CH]

Hello,
due to for example tailwind css class names, can there be a option to specify a custom merge function for the class fallthrough attributes?
So there can be the option to use the tailwind-merge methods (https://github.com/dcastil/tailwind-merge) to merge the fallthrough class name on a component?

Use case example:
Current status:
MyComponent:

<p class="text-red">Hi!</p>

<!-- when using the component -->
<MyComponent class="text-white" />

The rendered HTML is:

<p class="text-red text-white">Hi!</p>

With the possibility to define a custom merge function:
MyComponent:

<p class="text-red">Hi!</p>

<!-- when using the component -->
<MyComponent class="text-white" />

The rendered HTML is:

<p class="text-white">Hi!</p>

[LinusBorg]

What you can do right now:

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

  defineOptions({ inheritAttrs: false })
  const attrs = useAttrs()
</script>
<template>
  <p v-bind="{ ...attrs, class: null  }" :class="twMerge(attrs.class, 'text-red')">Hi!</p>
</template>

Could surely be a bit better abtracted, too.

[Radiergummi]

That, unfortunately, won't work with classes passed like :class="{ 'opacity-100': loading }", because tailwind-merge doesn't support object constructs.

[mrleblanc101]

@LinusBorg Would be nice if we could globally define a class merge strategy.
The class merge strategy would accept a function, and in the case of tailwindcss, we could just pass twMerge to be executed when merging the root node classes with the parent instance classes. Otherwise, we need to repeat this for every component.