How to extend TailwindMerge for borderWidth?

[nareshbhatia]

In my tailwind.config.js, I have extended borderWidth like this:

borderWidth: {
  sm: 'var(--border-width-sm)',
  md: 'var(--border-width-md)',
}

Now if I use a class like border-b-sm without twMerge, it works just fine. If I include twMerge, it "swallows" that style and does not return it in the output.

I tried to extend twMerge like this, but it still swallows the style:

const twMerge = extendTailwindMerge({
  // @ts-expect-error suppress type error ts(2353) TODO: fix
  theme: {
    borderWidth: ['sm', 'md'],
  },
});

What am I doing wrong?

P.S. I am getting a typescript error when using the theme property with extendTailwindMerge:

Object literal may only specify known properties, and 'theme' does not exist in type 'CreateConfigSubsequent | ConfigExtension<DefaultClassGroupIds, DefaultThemeGroupIds>'.ts(2353)

[dcastil]

Hey @nareshbhatia! 👋

You need to wrap your config in either an extend (or override) object. This config should work:

const twMerge = extendTailwindMerge({
  extend: {
    theme: {
      borderWidth: ['sm', 'md'],
    },
  },
});

[nareshbhatia]

Ah, missed that little extend detail. Thank you so much for your help, @dcastil.