What version of Tailwind CSS are you using?

v4.3.0 (latest), via @tailwindcss/postcss under Next.js 16 / Turbopack.

Describe your issue

The default gradient interpolation has no legacy-browser fallback, so on Chrome ≤110 every bg-linear-to-* gradient silently disappears. Every gradient utility compiles to:

.bg-linear-to-r {
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-position), var(--tw-gradient-stops));
}

linear-gradient(to right in oklab, …) is Chrome 111+ syntax. On Chrome ≤110 the var() substitution makes the background-image declaration invalid at computed-value time (IACVT) — it reverts to initial silently: no parse error, no JS error, the gradient is just gone (washed-out heroes, invisible button backgrounds). Because nothing throws, error monitoring can't see it; this cohort matters in markets with frozen Windows-7-era Chrome installs (max 109).

v4.1 added exactly the right semantic for explicit modifier interpolation — per the v4.1 release notes, gradients with a /modifier "fall back to the browser default interpolation when not supported". But the default in oklab position is emitted unguarded, and it's structurally invisible to the fallback transpiler: the modern syntax lives inside a custom property registered with syntax: "*", so neither Tailwind's own fallback pass nor downstream tools (Lightning CSS lowering with a chrome 109 browserslist target — verified) can see or transpile it.

Related: #15985, #13659.

Proposal

Apply the v4.1 fallback semantic to the default interpolation. Either:

1. Emit the position fallback-first inside the utility (last-declaration-wins for modern engines):

.bg-linear-to-r {
  --tw-gradient-position: to right;
  @supports (background-image: linear-gradient(in lab, red, red)) {
    --tw-gradient-position: to right in oklab;
  }
}

2. Or the inverse @supports not override (what we ship today as a workaround in our own stylesheet):

@supports not (background-image: linear-gradient(in oklab, red, red)) {
  .bg-linear-to-r  { --tw-gradient-position: to right; }
  .bg-linear-to-br { --tw-gradient-position: to bottom right; }
  .bg-linear-to-b  { --tw-gradient-position: to bottom; }
  .bg-linear-to-t  { --tw-gradient-position: to top; }
}

Modern browsers keep oklab interpolation; older engines get a standard sRGB gradient instead of nothing — matching the documented v4.1 fallback behavior ("fall back to the browser default interpolation").

Reproduction

Any v4 project: <div class="bg-linear-to-r from-blue-500 to-purple-500"> → open in Chrome ≤110 (e.g. Chrome 109, the last Windows 7 release) → no gradient renders. The compiled CSS contains --tw-gradient-position: to right in oklab with no guarded alternative.