I am looking to incorporate tailwind-merge into my Vue component to avoid conflicts with tailwind classes. An issue I've encountered is that when using useAttrs and adding a parent class, the additional classes are being duplicated.
The most straightforward solution is to utilize props, but I am curious if there is a way to apply the class attribute directly within the component itself.
<script setup lang="ts">
defineOptions({
name: "FormInputLabel",
// inheritAttrs: false, => this breaks the whole attribute injection
});
const { label = "", tag = "label" } = defineProps<{
label?: string;
tag?: "label" | "span";
}>();
const attrs = useAttrs();
const classAttrs = toRef(() => attrs.class);
</script>
<template>
<component
:is="tag"
:class="twMerge(clsx('font-medium text-base', classAttrs))"
>
<slot>
{{ label }}
</slot>
</component>
</template>