Support of tailwind 3.1.8

[KevinHoppeLS]

Hello guys,

since I updated tailwind to the latest version, twmerge seems to not work properly anymore.
Is the 3.1.8 version supported yet?

Best regards!

[dcastil]

Hi @KevinHoppeLS! 👋

The latest tailwind-merge version should already support Tailwind CSS v3.1.8. Can you tell me what specifically doesn't work properly anymore?

[dcastil]

Can you paste the exact twMerge call which produces the output from your screenshot here so I can reproduce it?

[KevinHoppeLS]

OK let me provide code for another example.

This is a CircleIconWrapper component I use twmerge in:

<CircleIconWrapper icon="ArrowRightOutlineIcon" color="white" class="p-2 ml-2 shadow gradient-red-promo border-none h-8 w-8" />

This is the twMerge call inside of the CircleIconWrapper component:

<div
        :class="
            twMerge(`text-${color} inline-block bg-white p-1 border-2 border-${color} rounded-full fill-current border-current`,
                $props.class
            )
        "
    >

This is the outcome. As you can see we have multiple padding styles applied:

But I wonder even with twMerge not working should the last padding not override the first one anyways instead of not applying any of them?

[KevinHoppeLS]

I might have found a working solution: (this is another component using twmerge and working as expected)

const props = defineProps({
    as: {
        type: [String, Function, Object],
        default: "div",
    },
    class: {
        type: String,
        default: "",
    },
});

const mergedClass = computed(() =>
    twMerge("flex justify-between items-center p-4", props.class)
);

Defining a mergeClass computed and merging the style classes in script instead of the template works fine

[dcastil]

You're using Vue, right? I think the problem here isn't tailwind-merge but Vue. You can test this by writing this code somewhere:

console.log(
    twMerge(
        'text-white inline-block bg-white p-1 border-2 border-white rounded-full fill-current border-current',
        'p-2 ml-2 shadow gradient-red-promo border-none h-8 w-8',
    ),
)

The result should be text-white inline-block bg-white border-2 rounded-full fill-current border-current p-2 ml-2 shadow gradient-red-promo border-none h-8 w-8 → there are no duplicated classes.

The reason why those classes still show up duplicated in the class attribute is because Vue takes the class prop on CircleIconWrapper and appends it to the root node within the component. You can read more about it in the Vue docs here: https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes. Here you can also find some info on how to use tailwind-merge with Vue: #76.

By the way, Tailwind warns about using dynamic Tailwind classes like text-${color} because Tailwind can't detect these classes. More on that here: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

[KevinHoppeLS]

Thanks a ton for your time and answer. Very much appreciated! This helps 👍