[v4] Transitions with active pseudo class increases unexpected margin in Safari when combined with a font size class

[plemnoooooo]

What version of Tailwind CSS are you using?

For example: v4.0.0@beta-2

What browser are you using?

Safari

What operating system are you using?

iOS

Reproduction URL

https://play.tailwindcss.com/9WNabyZoZg

Describe your issue

When pressing and holding onto a button that transitions from normal styles to active: pseudo-class styles with a font size class (like text-xl) in Safari, it creates an unexpected vertical margin increase, and if padding styles are included, it increases padding too.

[adamwathan]

Looked into this, only happens when we register these custom properties as "<color>":

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

If we register them as "*" everything works as expected, but you lose the ability to transition gradients. Safari man 😭

[adamwathan]

Should be fixed in v4.0.0-beta.3 which is out now!