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.

[fuegoio]

Hi 👋 A bit late to the party but I found something quite interesting that makes it quite easy to integrate Vue with tailwind-merge. If you define a props named class, it will receive the computed value of the class of the component, always being either a string or undefined.

<script setup lang="ts">
import { twMerge } from "tailwind-merge";

const props = defineProps<{
  class?: string;
}>();
</script>

<template>
  <div> <!-- Here the class is not propagated -->
    <div :class="twMerge('h-6', props.class)"> <!-- Here the class is computed and always a string -->
      ...
    </div>
  </div>
</template>

The only issue with that technique is that even if the Vue compiler does typecheck this correctly, the Vue Typescript Plugin does not. I'm gonna fill an issue on their repository and try to fix this.