One of my classes gets erased if I write it in the "wrong" order

[JackUait]

Hi! First of all I wanna thank you for such a good library! It helps me a lot ❤️

Second of all I've ran into a problem: if I write my classes in the order below the text-size class gets erased.

// Input
<p className='text-size-5 text-black-30' />

// Output
<p className='text-black-30' />

But if I write these classes in the reverse order both classes remain in their places.

// Input
<p className='text-black-30 text-size-5' />

// Output
<p className='text-black-30 text-size-5' />

The problem gets worse considering that I use Prettier plugin for sorting classes and it sorts my classes in the first way.

I've been playing around with extendTailwindMerge but couldn't come up with the way to fix this.
Any ideas why this might be happening?

Here is my tailwind.config.js:

theme: {
  colors: {
    brand: {
      4: 'rgba(94, 43, 255, 0.04)',
      8: 'rgba(94, 43, 255, 0.08)',
      100: '#5E2BFF',
    },
    red: '#F24822',
    black: {
      1: 'rgba(0, 0, 0, 0.01)',
      2: 'rgba(0, 0, 0, 0.02)',
      3: 'rgba(0, 0, 0, 0.03)',
      4: 'rgba(0, 0, 0, 0.04)',
      5: 'rgba(0, 0, 0, 0.05)',
      6: 'rgba(0, 0, 0, 0.06)',
      8: 'rgba(0, 0, 0, 0.08)',
      10: 'rgba(0, 0, 0, 0.10)',
      15: 'rgba(0, 0, 0, 0.15)',
      20: 'rgba(0, 0, 0, 0.20)',
      24: 'rgba(0, 0, 0, 0.24)',
      30: 'rgba(0, 0, 0, 0.30)',
      80: 'rgba(0, 0, 0, 0.80)',
      100: '#000',
    },
    white: {
      50: 'rgba(255, 255, 255, 0.5)',
      100: '#fff',
    },
    gray: {
      page: '#FDFCFF',
      modal: '#FCFCFC',
    },
    transparent: 'transparent',
  },
  fontSize: {
    'size-2.5': ['0.625rem', '11px'], // fs: 10px; lh: 11px
    'size-3': ['0.75rem', '14px'], // fs: 12px; lh: 14px
    'size-3.5': ['0.875rem', '20px'], // fs: 14px; lh: 20px
    'size-3.5-20': ['0.875rem', '20px'], // fs: 14px; lh: 22px
    'size-3.5-22': ['0.875rem', '22px'], // fs: 14px; lh: 22px
    'size-4': ['1rem', '22px'], // fs: 16px; lh: 22px
    'size-4-24': ['1rem', '24px'], // fs: 16px; lh: 24px
    'size-5': ['1.25rem', '28px'], // fs: 20px; lh: 28px
    'size-6': ['1.5rem', '32px'], // fs: 24px; lh: 32px
    'size-7': ['1.75rem', '36px'], // fs: 28px; lh: 36px
    'size-8': ['2rem', '40px'], // fs: 32px; lh: 40px
    'size-10': ['2.5rem', '52px'], // fs: 40px; lh: 52px
    'size-12': ['3rem', '56px'], // fs: 48px; lh: 56px
    'size-14': ['3rem', '56px'], // fs: 48px; lh: 56px
    'size-18': ['4.5rem', '80px'], // fs: 72px; lh: 80px
    'size-22': ['5.5rem', '80px'], // fs: 72px; lh: 80px
  }
  ...
}

Here is my custom twMerge function:

export const twMerge = extendTailwindMerge({
  theme: {
    fontSize: Object.keys(theme.fontSize),
    boxShadow: Object.keys(theme.boxShadow),
    fontWeight: Object.keys(theme.fontWeight),
    borderRadius: Object.keys(theme.borderRadius),
  },
})

[dcastil]

Hi @JackUait! 👋

The object passed to extendTailwindMerge is incorrect. tailwind-merge only supports some theme keys, in your case only borderRadius.

Try out this one, that should make it work:

const twMerge = extendTailwindMerge({
  theme: {
    borderRadius: Object.keys(theme.borderRadius),
  },
  classGroups: {
    'font-size': [{ text: Object.keys(theme.fontSize) }],
    shadow: [{ shadow: Object.keys(theme.boxShadow) }],
    'font-weight': [{ font: Object.keys(theme.fontWeight) }],
  },
})

I created a reproduction example for it here: https://codesandbox.io/s/tailwind-merge-playground-discussion-88-p5fmg0

Let me know if that helps 😊

[JackUait]

It helped! Thanks! ❤️

My bad I didn't pay much attention to the keys supported by theme.