Making class merging require no extra boilerplate?

[AaronBeaudoin]

First of all, this utility is awesome. Thanks for the hard work!

I'm just getting started trying it out in my project using Vue, and I'm realizing that the key "pain point" is just that it adds a lot of extra noise to the simple task of defining classes on a component.

Here's what I mean. This is a typical Button.vue component:

<template>
  <button class="classes...">
    <slot></slot>
  </button>
</template>

Now here's the same component but with this utility added in the most minimal way possible:

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

let props = defineProps(["class"]);
</script>

<template>
  <button :class="twMerge(`classes...`, $props.class)">
    <slot></slot>
  </button>
</template>

Ok fine, it's not that bad, but it still makes me wish I didn't have to actually define a prop, import the function, and manually mix my classes to make this work. I have my project configured so that even components themselves are auto-imported when used in templates, so I feel like I should be able to do this more simply.

So here's the idea.

It would be cool to be able to just add a custom directive to enable class merging!

<template>
  <button v-tailwind class="classes...">
    <slot></slot>
  </button>
</template>

And the classes would be merged transparently. Wouldn't that be beautiful?

I'm currently working on trying to make a directive to do this, but I'm running into SSR errors about the custom directive missing an SSR transform, and Vue currently provides a grand total of zero lines of documentation on how to actually make an SSR transform for a custom directive. Thanks Vue!

Edit: I'm also considering the possibility that a Vue custom directive just isn't the best way to abstract this. Not sure what else I'm supposed to use, however.

[dcastil]

Hey @AaronBeaudoin!

I think using an abstraction on top of tailwind-merge to make merging classes in Vue less boilerplaty sounds like a great idea. But I think it shouldn't be done in tailwind-merge for various reasons, some of which are

• tailwind-merge itself is framework-agnostic and is also used within other frameworks like React (or with no framework at all) and it would be unfair to bundle Vue-specific features into these people's code
• I have limited knowledge of Vue and it would be difficult for me to maintain a Vue-specific features in tailwind-merge

Maybe you could build a Vue-specific library on top of tailwind-merge? Seems like you've explored some ideas already and I'd be happy to help make it work in case some reasonable additions to the tailwind-merge API are necessary. 😊