Problem with arbitrary background-position values not working with background-color and utility classes

[neg4n]

Hey guys 👋🏻 Thanks for maintaining this amazing library 🚀 this is the first issue I've encountered so far and I'm not sure how to approach this 🙈 I've tried to modify my config accordingly to the docs but with no positive result of eliminating the problematic behavior

Thanks for help in advance!

The problem

When using arbitrary background-position values like bg-[left_2em_bottom_9rem] along with breakpoints utility classes and e.g. background-color some of the classes are getting removed (I'm not sure if only background-color is affected)

Example:

(the last comment is a result of a function call)

// ❌ not working example
twMerge([
  "bg-[left_2em_bottom_9rem]",
  "md:bg-[right_2em_bottom_4.5rem]",
  "bg-red-500",
]);
// md:bg-[right_2em_bottom_4.5rem] bg-red-500

// ✅ working example
twMerge([
  "bg-[left_2em_bottom_9rem]",
  "md:bg-[right_2em_bottom_4.5rem]",
]);
// bg-[left_2em_bottom_9rem] md:bg-[right_2em_bottom_4.5rem]

To Reproduce

1. git clone https://github.com/neg4n/twmerge-bg-color-bug/
2. cd twmerge-bg-color-bug && pnpm run start

Expected behavior

The background-position classes to be merged correctly, as raw clsx does.

(the last comment is a result of a function call)

clsx([
  "bg-[left_2em_bottom_9rem]",
  "md:bg-[right_2em_bottom_4.5rem]",
  "bg-red-500",
]); // bg-[left_2em_bottom_9rem] md:bg-[right_2em_bottom_4.5rem] bg-red-500

Environment

• tailwind-merge version: 2.2.2

[dcastil]

Hey @neg4n! 👋

Thanks for the nice words! ❤️

There is a limitation in tailwind-merge with arbitrary background-position: You need to use the label position: so that the class is identified correctly, i.e. bg-[position:left_2em_bottom_9rem]. More on that in https://github.com/dcastil/tailwind-merge/blob/v2.2.2/docs/limitations.md#you-need-to-use-label-in-arbitrary-background-position-and-background-size-classes.

By the way, you don't need to put the classes into an array, neither in twMerge nor clsx. Both work with an infinite number of arguments.