Tailwind size rules not being merged

[mhuggins]

Describe the bug

When trying to merge size rules, both rules remain in the class list, which may inadvertently result in the incorrect class being used.

To Reproduce

Pass two size-* classes into twMerge, e.g.:

import React from "react";
import { twMerge } from "tailwind-merge";

const MyComponent = () => (
  <div className={cn("bg-red size-4", "size-10")} />
);

Expected behavior

The resulting class on the div should be "bg-red size-10", but it ends up being "bg-red size-4 size-10" instead.

Environment

• tailwind-merge version: 1.14.0
• tailwindcss version: 3.4.14

Additional context

I seem to be able to work around this by extending tailwind-merge with the following. However, I haven't played with it enough to know if there are any negative side effects with how size interacts with w/h.

import { extendTailwindMerge, fromTheme } from "tailwind-merge";

const arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i;
const isArbitraryValue = (value: string) => arbitraryValueRegex.test(value);

const spacing = fromTheme("spacing");

export const twMerge = extendTailwindMerge({
  classGroups: {
    size: [
      {
        size: ["auto", "min", "max", "fit", isArbitraryValue, spacing],
      },
    ],
  },
});

[dcastil]

Hey @mhuggins! 👋

That's because your tailwind-merge version only supports Tailwind CSS v3.0 up to v3.3, but the size-* classes were added in Tailwind CSS v3.4. You'll need to upgrade to tailwind-merge v2.2.0 or higher to get support for size classes.

[mhuggins]

Ahh, thanks for letting me know! I'll upgrade & report back. 😄

[mhuggins]

Upgrading fixed it, thank you! 😄