Feature request: Add a “responsive reset” behavior to allow overriding all breakpoint variants of a class group

[maximepvrt]

I’m using tailwind-merge inside a design system that autogenerates responsive classes (Nuxt UI in my case, but the problem applies to any UI library doing this).

When I try to override a class group (e.g. padding), I can override the base class, but not all responsive variants.

---

❌ Current behavior

twMerge("p-4 md:p-6 lg:p-8", "p-2")

Result:

p-2 md:p-6 lg:p-8

The base padding gets overridden (p-4 → p-2), but all responsive variants remain untouched.

---

🧩 Why this is a real issue in the ecosystem

When a design system generates responsive classes that I don’t directly control:

• I cannot predict all breakpoints
• I cannot ensure my override clears all variants
• If the design system adds a new breakpoint (e.g. xl:), my overrides suddenly break

Example:

twMerge("p-4 md:p-6 lg:p-8", "p-2 md:p-2 lg:p-2")
// ➜ p-2 md:p-2 lg:p-2

After a design system update adds a new breakpoint (e.g. xl:):

twMerge("p-4 md:p-6 lg:p-8 xl:p-12", "p-2 md:p-2 lg:p-2")
// ➜ p-2 md:p-2 lg:p-2 xl:p-12   ← unexpected leftover!

I now need to manually add xl:p-2, and the problem repeats every time new breakpoints are introduced.

---

🧨 Practical consequences

This becomes:

• verbose: you must manually override all breakpoints
• fragile: breakpoints added later break overrides
• anti-Tailwind: goes against the utility-first spirit where overrides should be simple and predictable
• hard for design systems: component overrides become unpredictable

---

🙏 Feature request

Add a way to reset all variants of a class group when one override is applied.