Support mutual override between arbitrary property classes and prefixed classes

[liuqiang1357]

For example, I want to use text-center to override [text-align:inherit]. Although it can be achieved by setting conflictingClassGroups, I think it might be better if it is supported by default.

[liuqiang1357]

I configured it like this:

const customTwMerge = extendTailwindMerge({
  conflictingClassGroups: {
    'arbitrary..text-align': ['text-alignment'],
    'text-alignment': ['arbitrary..text-align'],
  },
});

I think there might be some programming method to support these configurations in batches.

[dcastil]

Hey @liuqiang1357! 👋

Yeah it's a bummer that you can't use arbitrary values for the text align classes. Defining conflicts between arbitrary properties and their matching Tailwind classes would easily triple (or more) the bundle size of tailwind-merge because we'd need to ship data about which Tailwind class belongs to which CSS property and therefore increase the amount of JS shipped to apps a lot. This is why I hesitated to add support for it for now.

I would definitely want to support that, but just not sure how to do it without increasing bundle size too much.