Custom gap classes

[rettimo]

tailwind-merge: 3.3.0

I have some custom classes for CSS gap. They are added to the config, but some of them are not working.

Config

classGroups: {
  gap: [{ gap: ['surface'], spacing: ['xs', 'sm', 'base', 'lg'] }],
  'gap-x': [{ 'gap-x': ['surface'], spacing: ['xs', 'sm', 'base', 'lg'] }],
  'gap-y': [{ 'gap-y': ['surface'], spacing: ['xs', 'sm', 'base', 'lg'] }],
},

Utils

export const twMerge = extendTailwindMerge(twMergeConfig);

export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

Tests

expect(cn('gap-1 gap-surface')).toEqual('gap-surface'); // pass
expect(cn('gap-surface gap-1')).toEqual('gap-1'); // pass

expect(cn('gap-1 spacing-base')).toEqual('spacing-base'); // fail
expect(cn('spacing-base gap-1')).toEqual('gap-1'); // fail

[dcastil]

Hey @rettimo! 👋

The problem is that you're defining the same classes in multiple groups while tailind-merge expects classes to be unique. The last defined classes override the previous in the internal logic of tailwind-merge, so it's the same as if you'd only define them in the gap-y group.

What styles did you define in the spacing-* classes? If these are a group of classes that conflicts with all gap-* classes, you can create a new group for it and define that it conflicts with all gap groups.

import { extendTailwindMerge } from 'tailwind-merge'

const twMerge = extendTailwindMerge<'spacing'>({
  extend: {
    classGroups: {
      gap: [{ gap: ['surface'] }],
      'gap-x': [{ 'gap-x': ['surface'] }],
      'gap-y': [{ 'gap-y': ['surface'] }],
      // new group for spacing-* classes
      spacing: [{ spacing: ['xs', 'sm', 'base', 'lg'] }],
    },
    conflictingClassGroups: {
      // spacing group conflicts with all gap groups
      spacing: ['gap', 'gap-x', 'gap-y'],
      // all gap groups conflict with spacing group
      gap: ['spacing'],
      'gap-x': ['spacing'],
      'gap-y': ['spacing'],
    },
  },
})

[rettimo]

Spacing is another group of css gaps. This is essentially also a gap, but has a different name. I would like to be able to merge them.

[dcastil]

Ah got it, then you only need to add those to the gap group. gap-x is for the CSS property column-gap and gap-y for row-gap.

import { extendTailwindMerge } from 'tailwind-merge'

const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      gap: [{ gap: ['surface'], spacing: ['xs', 'sm', 'base', 'lg'] }],
    },
  },
})

[rettimo]

Now everything works great, thanks!