Add a new twClear (or something like that) function

[AaronBeaudoin]

In Vue, I've found the most convenient way to use twMerge is something like this:

1. Attach the function to my Vue app as a global property so it can be accessed in any component like $twMerge.

   import { twMerge } from "tailwind-merge";
   
   app.config.globalProperties.$twMerge = twMerge;

2. Use it like this:

   <template>
     <button :class="$twMerge(`h-12 px-12 text-lg`, $attrs.class)">
       <slot></slot>
     </button>
   </template>

There's only one problem. Vue appends classes from where components are used to the classes inside the component. So if I use the component like this:

<template>
  <MyButton class="h-14 px-14">Hello</MyButton>
</template>

The actual HTML ends up being this:

<button class="text-lg h-14 px-14 h-14 px-14">Hello</button>

This is because the twMerge function does it's job correctly, but then Vue ends up tacking on the classes afterwards causing them to be added to the element twice. The reality is that this won't actually cause any real problems since duplicate classes won't affect the style in any negative way. However, it's ugly and does have an effect on the final size of the HTML.

So I propose that some sort of twClear function be added. This function would do the merging just like twMerge, but instead of keeping the last conflicting class it would just remove conflicting classes. Like this:

twClear('h-10 p-10') // → 'h-10 p-10'
twClear('h-10 p-10', 'p-12') // → 'h-10'
twClear('p-5 p-2 p-4') // → ''

That way, in the situation above I could just do this:

<template>
  <button :class="$twClear(`h-12 px-12 text-lg`, $attrs.class)">
    <slot></slot>
  </button>
</template>

And then when I use the component like this:

<template>
  <MyButton class="h-14 px-14">Hello</MyButton>
</template>

I would just get this:

<button class="text-lg h-14 px-14">Hello</button>

[AaronBeaudoin]

By the way, you may remember I was the one that created #70 as well, and this would pretty much resolve that discussion too because it reduces the "boilerplate" required to use this library to just what is necessary to make it work.

[dcastil]

Yes yes, I remember. Thanks for all the Vue-specific feedback! 🙌 I don't use Vue and am therefore not exposed to these issues myself which makes it hard to imagine how well tailwind-merge works there.

[dcastil]

Yeah you're right, that behavior of Vue doesn't work well with tailwind-merge. I'm not sure whether creating a twClear function would be the best option since I would need to make that one configurable with something like extendTailwindMerge as well which would almost double the API surface of tailwind-merge. 🤔

But I'm thinking about the option of adding something to the config so you can hook into the merging behavior of tailwind-merge. Maybe something like

const twMerge = extendTailwindMerge({
    mergeClasses(/* some args here */) {
        // Custom merging behavior defined here
    }
})

What do you think?

[AaronBeaudoin]

Yeah that would work great as well! I would only need to do this in one place where I make twMerge globally accessible in my Vue app so this would be perfect.

[kon3ko]

@AaronBeaudoin @dcastil
As of now, is there a way to implement it in Vusjs?
I'm wondering I used to use it like this before

<a class="text-sm" :class="{ 'color-red-100' : active, 'color-green-100' : !active }" >Link</a>

How do I use twMerge?

[dcastil]

I'm not a Vue expert but I think you need to expose twMerge in the template so that you can use it in there. According to the Vue docs it's probably something like this:

<script>
import { twMerge } from 'tailwind-merge'
  
export default {
  methods: {
    twMerge
  }
}
</script>

<template>
  <div :class="twMerge('your-classes-here')">Testing</div>
</template>

[kon3ko]

@dcastil How do I put an if inside of twMerge?
Or do you have another api to use? For this use
Because the main goal is to write if

[kon3ko]

<div :class="twMerge('text-lg p-2',{ 'text-sm' : active })">Testing</div>

Is it possible if I write like this?

[dcastil]

You can do that like this:

<div :class="twMerge('text-lg p-2', active && 'text-sm')">Testing</div>

tailwind-merge ignores falsy values.

[kon3ko]

Thank a lot