tw-merge configuration documentation

[joshytaco]

I'm having some issues with the output of my tailwind classes when using twMerge (e.g. classes that shouldn't be applied are being applied like pl-4 pl-5). I'm sure this has to do with configuring twMerge and I've read all of the documentation, however I cannot find where I'm supposed to define the configuration. Is it in my tailwind config file? Is it in a separate file like twMerge.config.js? Am I adding to an existing file? I'm sure that this documentation has everything I need to solve my issue, I just have no idea were I need to define the twMerge config object.

I'm probably completely missing where the documentation mentions this, but I cannot find it for the life of me and I need to speak to a human 😂

Thanks

[dcastil]

Hey @joshytaco! 👋 Thanks for bearing with me, I was away from my computer for a week.

Oh yeah, I think the documentation doesn't mention this indeed. tailwind-merge is just a normal runtime function, so the configuration should be wherever your runtime is. If you're using tailwind-merge in the browser, then just put it where your code that runs in the browser is. I usually create a file like tailwind-merge.ts in a utils folder and then add this code to it:

import { extendTailwindMerge } from 'tailwind-merge'

export const twMerge = extendTailwindMerge({
    // my config here
})

Then I import the twMerge function from that file wherever I need it.

By the way regarding your comment

e.g. classes that shouldn't be applied are being applied like pl-4 pl-5

tailwind-merge by default allows all classes that look like Tailwind classes, e.g. pl-456 is treated like one, even if you didn't configure it. That allows you to use tailwind-merge without the need to configure anything if you tweak your scales in the Tailwind config. But the tradeoff is that everything that looks like a Tailwind class is also treated as such. Is that the problem you have?

[joshytaco]

@dcastil Thanks so much! That answers my question and helped to fix the issue I was having.

I have a component that has some base styles and a className prop that I pass into twMerge to give a developer using that component a styling escape hatch so they can override any base styles.
The problem was that the generated classes included both the base utility class and the overriding utility class (e.g. both tw-px-10 and tw-px-0) and the intended overriding class didn't get its styles applied. My guess was that because I'm using the tw- prefix I would need to extend twMerge and include the vendor prefix, which I just tested and it worked! So that was the missing link for me.