Check for class group with modifier first before checking without modifier

[dcastil]

Tailwind CSS first checks for class group with potential postfix modifier included (source), so tailwind-merge should do that too to prevent diverging behavior between the two libraries.

I couldn't do that in #214 because that would have been a breaking change. The reason is that if we first check for groups with the modifier included, a class like text-lg/7 which belongs into the font-size group will be incorrectly identified as a text-color group since colors use the catchall validator isAny.

So to be able to first check for the group with the modifier, the general use of isAny needs to go, meaning that tailwind-merge will be more strict about which colors it accepts in its default config. Hence the breaking change.

I could imagine to use following validators for colors.

function isColor(value: string) {
    return /^([a-z]+-)+\d+$/.test(value)
}

function isArbitraryColor(value: string) {
    return getIsArbitraryValue(value, 'color', isAny)
}

I should keep in mind that this feature would bring me further away from a potential minimal tailwind-merge config which would rely on the isAny validator a lot. Therefore I'm not 100% sure whether I want to do this change.

[dcastil]

Commit where lookup with and without modifier was switched: 9b35ce5

[dcastil]

I'm less sure that it makes sense to implement this change. A lot of users would need to modify their color config as a result of this and if a color like white, inherit or transparent would be added, it's easy to forget to add that to the isColor function. I can also imagine that a lot of people would just add back the isAny validator which then would cause the postfix modifier behavior to work unexpectedly.

All in all the current behavior is probably more safe in terms of unintended consequences when configuring tailwind-merge.

[dcastil]

I won't do this in v2 due to reasons explained in #215 (comment).