transform via CSS variables overridden by injected stylesheets (e.g. Chrome extensions) — any recommended fallback or workaround?

[Aylay]

Context

I'm using Tailwind CSS (v4 setup, PostCSS, no tailwind.config.js) and relying on utilities like translate-y-1/2 and scale-105. As expected, these utilities compile to CSS variables (--tw-translate-y, --tw-scale-x, etc.) which are applied via translate: or transform: properties.

Example output:

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

The issue

On one machine (Chrome on macOS), we noticed the layout breaks and transform-related effects are missing.

After some debugging, it turns out that a Chrome extension is injecting a stylesheet with transform: none !important, which overrides Tailwind’s composed transform (based on --tw-* vars).

In this case, since:
• CSS variables cannot be used with !important,
• and Tailwind’s transform utility relies entirely on composable variables,

…we’re unable to override that external !important rule using Tailwind utilities.

Question

I understand this isn’t a Tailwind bug, but a side effect of how composable styles and CSS variables work.

Still, I’m wondering:
• Is there a recommended way to force a transform value (e.g. translateY(-50%)) outside the --tw-* system, perhaps using @layer and a manual rule?
• Is there a way to temporarily opt out of the variable-based transform composition for critical elements?

Any workaround that would allow better protection against injected !important transform rules (from extensions or user stylesheets) would be very helpful.

Thanks for your great work!