I'm not sure I understand classGroups or conflictingClassGroups

[mariojankovic]

Hey everyone.

I have a fairly large custom tailwind extend I'm using that is generated from a lot of figma tokens.

This is my extended twMerge config:

import { extendTailwindMerge, fromTheme } from 'tailwind-merge'

const customTwMerge = extendTailwindMerge({
  override: {
    theme: {
      borderWidth: ['input'],
      borderColor: ['input-active', 'input-error', 'input-color', 'input-disabled'],
    },
    classGroups: {
      'border-w': [{ border: fromTheme('borderWidth') }],
      'border-color': [{ border: fromTheme('borderColor') }],
    },
  },
})

export const twMerge = customTwMerge

And when I do twMerge('border-input border-input-color') I get border-input-color.
And when I do twMerge('border-input border-2') I get border-input border-2 which implies that input is actually a border color value, which is wrong.

What am I missing?

[dcastil]

Hey @mariojankovic! 👋

The nested values in classGroups need to be arrays. You only need this change to make your config correct:

 import { extendTailwindMerge, fromTheme } from 'tailwind-merge'

 const customTwMerge = extendTailwindMerge({
   override: {
     theme: {
       borderWidth: ['input'],
       borderColor: ['input-active', 'input-error', 'input-color', 'input-disabled'],
     },
     classGroups: {
-      'border-w': [{ border: fromTheme('borderWidth') }],
-      'border-color': [{ border: fromTheme('borderColor') }],
+      'border-w': [{ border: [fromTheme('borderWidth')] }],
+      'border-color': [{ border: [fromTheme('borderColor')] }],
     },
   },
 })

export const twMerge = customTwMerge

Here is an example: https://codesandbox.io/p/sandbox/tailwind-merge-404-zvmtgc?file=%2Fsrc%2Findex.ts%3A39%2C4