How to use negative modifiers in V4 like xy-4/-4

[Noshiroh]

This @utility accepts positive values and positive modifiers

@utility xy-* {
  --x: --value(--anim-translate- *, [ *]);
  --x: calc(--value(number) / 4 * 1rem);

  --y: --modifier(--anim-translate- *, [ *]);
  --y: calc(--modifier(number) / 4 * 1rem);

  translate: var(--x) var(--y, var(--x));
}
/* Example
xy-4 = translate: 1rem 1rem;
xy-4/8 = translate: 1rem 2rem;
*/

And this one accepts negative values

@utility -xy-* {
  --x: calc(--value(--anim-translate- *, [ *]) * -1);
  --x: calc(--value(number) / 4 * -1rem);

  --y: --modifier(--anim-translate- *, [ *]);
  --y: calc(--modifier(number) / 4 * 1rem);

  translate: var(--x) var(--y, var(--x));
}
/* Example
-xy-4 = translate: -1rem -1rem;
-xy-4/8 = translate: -1rem 2rem;
*/

What about negative modifiers?

[adydetra]

To support negative modifiers (like xy-4/-4), you need to create additional utility variants that explicitly handle the negative sign in the modifier position.

Solution

Here's how to handle all combinations of positive and negative values with modifiers:

@utility xy-* {
  --x: --value(--anim-translate-*, [*]);
  --x: calc(--value(number) / 4 * 1rem);

  --y: --modifier(--anim-translate-*, [*]);
  --y: calc(--modifier(number) / 4 * 1rem);

  translate: var(--x) var(--y, var(--x));
}

/* Positive value, negative modifier: xy-4/-8 */
@utility xy-*/-* {
  --x: --value(--anim-translate-*, [*]);
  --x: calc(--value(number) / 4 * 1rem);

  /* Modifier becomes negative */
  --y: calc(--modifier(--anim-translate-*, [*]) * -1);
  --y: calc(--modifier(number) / 4 * -1rem);

  translate: var(--x) var(--y, var(--x));
}

/* Negative value, positive modifier: -xy-4/8 */
@utility -xy-* {
  --x: calc(--value(--anim-translate-*, [*]) * -1);
  --x: calc(--value(number) / 4 * -1rem);

  --y: --modifier(--anim-translate-*, [*]);
  --y: calc(--modifier(number) / 4 * 1rem);

  translate: var(--x) var(--y, var(--x));
}

/* Negative value, negative modifier: -xy-4/-8 */
@utility -xy-*/-* {
  --x: calc(--value(--anim-translate-*, [*]) * -1);
  --x: calc(--value(number) / 4 * -1rem);

  --y: calc(--modifier(--anim-translate-*, [*]) * -1);
  --y: calc(--modifier(number) / 4 * -1rem);

  translate: var(--x) var(--y, var(--x));
}

---

Usage Examples

Class	Result
xy-4	translate: 1rem 1rem
xy-4/8	translate: 1rem 2rem
xy-4/-8	translate: 1rem -2rem ✅
-xy-4	translate: -1rem -1rem
-xy-4/8	translate: -1rem 2rem
-xy-4/-8	translate: -1rem -2rem ✅

Explanation

• Pattern xy-*/-*: Captures the negative sign in the modifier position (/-4)
• Multiplication by -1: calc(--modifier(number) / 4 * -1rem) converts the modifier to a negative value
• Four variants needed: To cover all combinations (positive/positive, positive/negative, negative/positive, negative/negative)

Alternative Approach

If you prefer a more concise solution and Tailwind v4 supports arbitrary values with negative signs, you can use:

• xy-4/[-8] as a workaround for negative modifiers

However, the explicit utility approach above provides better autocomplete support and is more predictable.