🐛 twMerge doesn't handle conflicting aspect ratio classes

[faiz9068]

Problem

twMerge doesn't recognize conflicting aspect ratio classes as conflicting utilities, keeping both classes instead of merging them.

Steps to Reproduce

import { twMerge } from "tailwind-merge";

const result = twMerge("aspect-6/1", "aspect-3/1");
console.log(result); // Outputs: "aspect-6/1 aspect-3/1"

Expected: "aspect-3/1"
Actual: "aspect-6/1 aspect-3/1"

Root Cause

Aspect ratio classes like aspect-6/1 and aspect-3/1 are arbitrary value utilities (aspect-[ratio]), and twMerge doesn't recognize them as conflicting classes because:

1. They use arbitrary value syntax (aspect-[ratio])
2. They're not included in the predefined conflict groups
3. Each arbitrary value is treated as a unique, non-conflicting class

Impact

• Unnecessary CSS classes in HTML output
• Confusing class combinations
• Inconsistent behavior compared to standard utilities like text-red-500 vs text-blue-500

Possible Solutions

1. Add arbitrary value utilities to conflict groups
2. Implement pattern-based conflict detection for arbitrary values
3. Add configuration option for custom conflict patterns

---

Environment: Any environment using twMerge with Tailwind CSS arbitrary values Priority: Medium - affects code clarity and HTML output cleanliness

[dcastil]

Hey @faiz9068! Do you have a reproducible example of this? Just tried this out in https://codesandbox.io/p/sandbox/ymtvyy?file=%2Fsrc%2Findex.ts%3A17%2C28 but tailwind-merge seems to correctly remove aspect-6/1.

[davidhellmann]

@dcastil looks like fractions are working but strings not: https://codesandbox.io/p/devbox/tailwind-merge-598-forked-vffqgq

[dcastil]

@davidhellmann sorry for my late reply! The reason for tailwind-merge not to dedup these classes is that aspect-landscape doesn't exist in the default Tailwind config. If you added that class to your config, you'll need to configure tailwind-merge as well.

Here is an example on how to configure tailwind-merge: https://github.com/dcastil/tailwind-merge/blob/v3.3.1/docs/recipes.md#adding-custom-scale-from-tailwind-config-to-tailwind-merge-config

And here is the documentation on how the tailwind-merge configuration works: https://github.com/dcastil/tailwind-merge/blob/v3.3.1/docs/configuration.md#usage-with-custom-tailwind-config.

---

Related: https://github.com/dcastil/tailwind-merge/issues/599, https://github.com/dcastil/tailwind-merge/issues/595, https://github.com/dcastil/tailwind-merge/issues/593, https://github.com/dcastil/tailwind-merge/issues/583, https://github.com/dcastil/tailwind-merge/issues/574, https://github.com/dcastil/tailwind-merge/issues/561, https://github.com/dcastil/tailwind-merge/issues/544, https://github.com/dcastil/tailwind-merge/discussions/489, https://github.com/dcastil/tailwind-merge/issues/488, https://github.com/dcastil/tailwind-merge/issues/469, https://github.com/dcastil/tailwind-merge/issues/447, https://github.com/dcastil/tailwind-merge/issues/368, https://github.com/dcastil/tailwind-merge/discussions/322, https://github.com/dcastil/tailwind-merge/issues/321, https://github.com/dcastil/tailwind-merge/discussions/315, https://github.com/dcastil/tailwind-merge/issues/302, https://github.com/dcastil/tailwind-merge/issues/276, https://github.com/dcastil/tailwind-merge/discussions/275, https://github.com/dcastil/tailwind-merge/issues/274, https://github.com/dcastil/tailwind-merge/issues/250, https://github.com/dcastil/tailwind-merge/issues/207

[dcastil]

Closing this issue as the original issue is not reproducible. Let me know in case I should reopen.

[davidhellmann]

@dcastil you're totally right. I updated my merge config. thanks!