diff --git a/CHANGELOG.md b/CHANGELOG.md
index c13589a9d1e4..5ae4dd48f276 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Only generate positive `grid-cols-*` and `grid-rows-*` utilities ([#16020](https://github.com/tailwindlabs/tailwindcss/pull/16020))
 - Ensure we process Tailwind CSS features when only using `@reference` or `@variant` ([#16057](https://github.com/tailwindlabs/tailwindcss/pull/16057))
+- Refactor gradient implementation to work around [prettier/prettier#17058](https://github.com/prettier/prettier/issues/17058) ([#16072](https://github.com/tailwindlabs/tailwindcss/pull/16072))
 
 ## [4.0.1] - 2025-01-29
 
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.test.ts b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
index 4c5dd99d0816..9a828d673b78 100644
--- a/packages/tailwindcss/src/compat/legacy-utilities.test.ts
+++ b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
@@ -22,42 +22,42 @@ test('bg-gradient-*', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ".bg-gradient-to-b {
-      --tw-gradient-position: to bottom in oklab, ;
+      --tw-gradient-position: to bottom in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-bl {
-      --tw-gradient-position: to bottom left in oklab, ;
+      --tw-gradient-position: to bottom left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-br {
-      --tw-gradient-position: to bottom right in oklab, ;
+      --tw-gradient-position: to bottom right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-l {
-      --tw-gradient-position: to left in oklab, ;
+      --tw-gradient-position: to left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-r {
-      --tw-gradient-position: to right in oklab, ;
+      --tw-gradient-position: to right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-t {
-      --tw-gradient-position: to top in oklab, ;
+      --tw-gradient-position: to top in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-tl {
-      --tw-gradient-position: to top left in oklab, ;
+      --tw-gradient-position: to top left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-tr {
-      --tw-gradient-position: to top right in oklab, ;
+      --tw-gradient-position: to top right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }"
   `)
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.ts b/packages/tailwindcss/src/compat/legacy-utilities.ts
index d86b1770ab6e..5711892d7359 100644
--- a/packages/tailwindcss/src/compat/legacy-utilities.ts
+++ b/packages/tailwindcss/src/compat/legacy-utilities.ts
@@ -14,7 +14,7 @@ export function registerLegacyUtilities(designSystem: DesignSystem) {
     ['tl', 'top left'],
   ]) {
     designSystem.utilities.static(`bg-gradient-to-${value}`, () => [
-      decl('--tw-gradient-position', `to ${direction} in oklab,`),
+      decl('--tw-gradient-position', `to ${direction} in oklab`),
       decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
     ])
   }
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index d57bffeaabee..10720b167759 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -10160,257 +10160,257 @@ test('bg', async () => {
     }
 
     .-bg-conic-45\\/oklab {
-      --tw-gradient-position: from calc(45 * -1) in oklab, ;
+      --tw-gradient-position: from calc(45 * -1) in oklab;
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
     .-bg-linear-45, .-bg-linear-45\\/oklab {
-      --tw-gradient-position: calc(45deg * -1) in oklab, ;
+      --tw-gradient-position: calc(45deg * -1) in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .-bg-linear-\\[1\\.3rad\\] {
-      --tw-gradient-position: calc(74.4845deg * -1), ;
+      --tw-gradient-position: calc(74.4845deg * -1);
       background-image: linear-gradient(var(--tw-gradient-stops, calc(74.4845deg * -1)));
     }
 
     .-bg-linear-\\[125deg\\] {
-      --tw-gradient-position: calc(125deg * -1), ;
+      --tw-gradient-position: calc(125deg * -1);
       background-image: linear-gradient(var(--tw-gradient-stops, calc(125deg * -1)));
     }
 
     .bg-conic-45\\/\\[in_hsl_longer_hue\\] {
-      --tw-gradient-position: from 45deg in hsl longer hue, ;
+      --tw-gradient-position: from 45deg in hsl longer hue;
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
     .bg-conic-45\\/oklab {
-      --tw-gradient-position: from 45deg in oklab, ;
+      --tw-gradient-position: from 45deg in oklab;
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
     .bg-conic-45\\/shorter {
-      --tw-gradient-position: from 45deg in oklch shorter hue, ;
+      --tw-gradient-position: from 45deg in oklch shorter hue;
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
     .bg-conic\\/\\[in_hsl_longer_hue\\] {
-      --tw-gradient-position: in hsl longer hue, ;
+      --tw-gradient-position: in hsl longer hue;
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
     .bg-conic\\/decreasing {
-      --tw-gradient-position: in oklch decreasing hue, ;
+      --tw-gradient-position: in oklch decreasing hue;
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
     .bg-conic\\/hsl {
-      --tw-gradient-position: in hsl, ;
+      --tw-gradient-position: in hsl;
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
     .bg-conic\\/increasing {
-      --tw-gradient-position: in oklch increasing hue, ;
+      --tw-gradient-position: in oklch increasing hue;
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
     .bg-conic\\/longer {
-      --tw-gradient-position: in oklch longer hue, ;
+      --tw-gradient-position: in oklch longer hue;
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
     .bg-conic\\/oklab {
-      --tw-gradient-position: in oklab, ;
+      --tw-gradient-position: in oklab;
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
     .bg-conic\\/oklch {
-      --tw-gradient-position: in oklch, ;
+      --tw-gradient-position: in oklch;
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
     .bg-conic\\/shorter {
-      --tw-gradient-position: in oklch shorter hue, ;
+      --tw-gradient-position: in oklch shorter hue;
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
     .bg-conic\\/srgb {
-      --tw-gradient-position: in srgb, ;
+      --tw-gradient-position: in srgb;
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-45 {
-      --tw-gradient-position: 45deg in oklab, ;
+      --tw-gradient-position: 45deg in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-45\\/\\[in_hsl_longer_hue\\] {
-      --tw-gradient-position: 45deg in hsl longer hue, ;
+      --tw-gradient-position: 45deg in hsl longer hue;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-45\\/oklab {
-      --tw-gradient-position: 45deg in oklab, ;
+      --tw-gradient-position: 45deg in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-45\\/shorter {
-      --tw-gradient-position: 45deg in oklch shorter hue, ;
+      --tw-gradient-position: 45deg in oklch shorter hue;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-\\[1\\.3rad\\] {
-      --tw-gradient-position: 74.4845deg, ;
+      --tw-gradient-position: 74.4845deg;
       background-image: linear-gradient(var(--tw-gradient-stops, 74.4845deg));
     }
 
     .bg-linear-\\[125deg\\] {
-      --tw-gradient-position: 125deg, ;
+      --tw-gradient-position: 125deg;
       background-image: linear-gradient(var(--tw-gradient-stops, 125deg));
     }
 
     .bg-linear-\\[to_bottom\\] {
-      --tw-gradient-position: to bottom, ;
+      --tw-gradient-position: to bottom;
       background-image: linear-gradient(var(--tw-gradient-stops, to bottom));
     }
 
     .bg-linear-to-b {
-      --tw-gradient-position: to bottom in oklab, ;
+      --tw-gradient-position: to bottom in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-bl {
-      --tw-gradient-position: to bottom left in oklab, ;
+      --tw-gradient-position: to bottom left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-br {
-      --tw-gradient-position: to bottom right in oklab, ;
+      --tw-gradient-position: to bottom right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-l {
-      --tw-gradient-position: to left in oklab, ;
+      --tw-gradient-position: to left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-r {
-      --tw-gradient-position: to right in oklab, ;
+      --tw-gradient-position: to right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] {
-      --tw-gradient-position: to right in hsl longer hue, ;
+      --tw-gradient-position: to right in hsl longer hue;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-r\\/\\[longer\\] {
-      --tw-gradient-position: to right longer, ;
+      --tw-gradient-position: to right longer;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-r\\/decreasing {
-      --tw-gradient-position: to right in oklch decreasing hue, ;
+      --tw-gradient-position: to right in oklch decreasing hue;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-r\\/hsl {
-      --tw-gradient-position: to right in hsl, ;
+      --tw-gradient-position: to right in hsl;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-r\\/increasing {
-      --tw-gradient-position: to right in oklch increasing hue, ;
+      --tw-gradient-position: to right in oklch increasing hue;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-r\\/longer {
-      --tw-gradient-position: to right in oklch longer hue, ;
+      --tw-gradient-position: to right in oklch longer hue;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-r\\/oklab {
-      --tw-gradient-position: to right in oklab, ;
+      --tw-gradient-position: to right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-r\\/oklch {
-      --tw-gradient-position: to right in oklch, ;
+      --tw-gradient-position: to right in oklch;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-r\\/shorter {
-      --tw-gradient-position: to right in oklch shorter hue, ;
+      --tw-gradient-position: to right in oklch shorter hue;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-r\\/srgb {
-      --tw-gradient-position: to right in srgb, ;
+      --tw-gradient-position: to right in srgb;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-t {
-      --tw-gradient-position: to top in oklab, ;
+      --tw-gradient-position: to top in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-tl {
-      --tw-gradient-position: to top left in oklab, ;
+      --tw-gradient-position: to top left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-tr {
-      --tw-gradient-position: to top right in oklab, ;
+      --tw-gradient-position: to top right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-radial-\\[circle_at_center\\] {
-      --tw-gradient-position: circle at center, ;
+      --tw-gradient-position: circle at center;
       background-image: radial-gradient(var(--tw-gradient-stops, circle at center));
     }
 
     .bg-radial\\/\\[in_hsl_longer_hue\\] {
-      --tw-gradient-position: in hsl longer hue, ;
+      --tw-gradient-position: in hsl longer hue;
       background-image: radial-gradient(var(--tw-gradient-stops));
     }
 
     .bg-radial\\/decreasing {
-      --tw-gradient-position: in oklch decreasing hue, ;
+      --tw-gradient-position: in oklch decreasing hue;
       background-image: radial-gradient(var(--tw-gradient-stops));
     }
 
     .bg-radial\\/hsl {
-      --tw-gradient-position: in hsl, ;
+      --tw-gradient-position: in hsl;
       background-image: radial-gradient(var(--tw-gradient-stops));
     }
 
     .bg-radial\\/increasing {
-      --tw-gradient-position: in oklch increasing hue, ;
+      --tw-gradient-position: in oklch increasing hue;
       background-image: radial-gradient(var(--tw-gradient-stops));
     }
 
     .bg-radial\\/longer {
-      --tw-gradient-position: in oklch longer hue, ;
+      --tw-gradient-position: in oklch longer hue;
       background-image: radial-gradient(var(--tw-gradient-stops));
     }
 
     .bg-radial\\/oklab {
-      --tw-gradient-position: in oklab, ;
+      --tw-gradient-position: in oklab;
       background-image: radial-gradient(var(--tw-gradient-stops));
     }
 
     .bg-radial\\/oklch {
-      --tw-gradient-position: in oklch, ;
+      --tw-gradient-position: in oklch;
       background-image: radial-gradient(var(--tw-gradient-stops));
     }
 
     .bg-radial\\/shorter {
-      --tw-gradient-position: in oklch shorter hue, ;
+      --tw-gradient-position: in oklch shorter hue;
       background-image: radial-gradient(var(--tw-gradient-stops));
     }
 
     .bg-radial\\/srgb {
-      --tw-gradient-position: in srgb, ;
+      --tw-gradient-position: in srgb;
       background-image: radial-gradient(var(--tw-gradient-stops));
     }
 
@@ -10710,62 +10710,62 @@ test('from', async () => {
 
     .from-\\[\\#0088cc\\] {
       --tw-gradient-from: #08c;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-\\[\\#0088cc\\]\\/50, .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\] {
       --tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-\\[color\\:var\\(--my-color\\)\\] {
       --tw-gradient-from: var(--my-color);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-\\[color\\:var\\(--my-color\\)\\]\\/50, .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
       --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-\\[var\\(--my-color\\)\\] {
       --tw-gradient-from: var(--my-color);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-\\[var\\(--my-color\\)\\]\\/50, .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
       --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-current {
       --tw-gradient-from: currentColor;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-current\\/50, .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\] {
       --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-inherit {
       --tw-gradient-from: inherit;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-red-500 {
       --tw-gradient-from: var(--color-red-500);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-red-500\\/50, .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\] {
       --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-transparent {
       --tw-gradient-from: transparent;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .from-0\\% {
@@ -10929,73 +10929,73 @@ test('via', async () => {
 
     .via-\\[\\#0088cc\\] {
       --tw-gradient-via: #08c;
-      --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-\\[\\#0088cc\\]\\/50, .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\] {
       --tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5);
-      --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-\\[color\\:var\\(--my-color\\)\\] {
       --tw-gradient-via: var(--my-color);
-      --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-\\[color\\:var\\(--my-color\\)\\]\\/50, .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
       --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
-      --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-\\[var\\(--my-color\\)\\] {
       --tw-gradient-via: var(--my-color);
-      --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-\\[var\\(--my-color\\)\\]\\/50, .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
       --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
-      --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-current {
       --tw-gradient-via: currentColor;
-      --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] {
       --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent);
-      --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-inherit {
       --tw-gradient-via: inherit;
-      --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-red-500 {
       --tw-gradient-via: var(--color-red-500);
-      --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] {
       --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
     .via-transparent {
       --tw-gradient-via: transparent;
-      --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
@@ -11158,62 +11158,62 @@ test('to', async () => {
 
     .to-\\[\\#0088cc\\] {
       --tw-gradient-to: #08c;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-\\[\\#0088cc\\]\\/50, .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\] {
       --tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-\\[color\\:var\\(--my-color\\)\\] {
       --tw-gradient-to: var(--my-color);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-\\[color\\:var\\(--my-color\\)\\]\\/50, .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
       --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-\\[var\\(--my-color\\)\\] {
       --tw-gradient-to: var(--my-color);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-\\[var\\(--my-color\\)\\]\\/50, .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
       --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-current {
       --tw-gradient-to: currentColor;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-current\\/50, .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\] {
       --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-inherit {
       --tw-gradient-to: inherit;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-red-500 {
       --tw-gradient-to: var(--color-red-500);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-red-500\\/50, .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\] {
       --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-transparent {
       --tw-gradient-to: transparent;
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     .to-0\\% {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 57f39e021358..9f4a1039be95 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2370,7 +2370,7 @@ export function createUtilities(theme: Theme) {
               value = negative ? `calc(${value} * -1)` : `${value}`
 
               return [
-                decl('--tw-gradient-position', `${value},`),
+                decl('--tw-gradient-position', value),
                 decl('background-image', `linear-gradient(var(--tw-gradient-stops,${value}))`),
               ]
             }
@@ -2378,7 +2378,7 @@ export function createUtilities(theme: Theme) {
               if (negative) return
 
               return [
-                decl('--tw-gradient-position', `${value},`),
+                decl('--tw-gradient-position', value),
                 decl('background-image', `linear-gradient(var(--tw-gradient-stops,${value}))`),
               ]
             }
@@ -2398,7 +2398,7 @@ export function createUtilities(theme: Theme) {
         let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
 
         return [
-          decl('--tw-gradient-position', `${value} ${interpolationMethod},`),
+          decl('--tw-gradient-position', `${value} ${interpolationMethod}`),
           decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
         ]
       }
@@ -2425,7 +2425,7 @@ export function createUtilities(theme: Theme) {
           if (candidate.modifier) return
           let value = candidate.value.value
           return [
-            decl('--tw-gradient-position', `${value},`),
+            decl('--tw-gradient-position', value),
             decl('background-image', `conic-gradient(var(--tw-gradient-stops,${value}))`),
           ]
         }
@@ -2434,7 +2434,7 @@ export function createUtilities(theme: Theme) {
 
         if (!candidate.value) {
           return [
-            decl('--tw-gradient-position', `${interpolationMethod},`),
+            decl('--tw-gradient-position', interpolationMethod),
             decl('background-image', `conic-gradient(var(--tw-gradient-stops))`),
           ]
         }
@@ -2446,7 +2446,7 @@ export function createUtilities(theme: Theme) {
         value = negative ? `calc(${value} * -1)` : `${value}deg`
 
         return [
-          decl('--tw-gradient-position', `from ${value} ${interpolationMethod},`),
+          decl('--tw-gradient-position', `from ${value} ${interpolationMethod}`),
           decl('background-image', `conic-gradient(var(--tw-gradient-stops))`),
         ]
       }
@@ -2471,7 +2471,7 @@ export function createUtilities(theme: Theme) {
       if (!candidate.value) {
         let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
         return [
-          decl('--tw-gradient-position', `${interpolationMethod},`),
+          decl('--tw-gradient-position', interpolationMethod),
           decl('background-image', `radial-gradient(var(--tw-gradient-stops))`),
         ]
       }
@@ -2480,7 +2480,7 @@ export function createUtilities(theme: Theme) {
         if (candidate.modifier) return
         let value = candidate.value.value
         return [
-          decl('--tw-gradient-position', `${value},`),
+          decl('--tw-gradient-position', value),
           decl('background-image', `radial-gradient(var(--tw-gradient-stops,${value}))`),
         ]
       }
@@ -2655,7 +2655,7 @@ export function createUtilities(theme: Theme) {
       decl('--tw-gradient-from', value),
       decl(
         '--tw-gradient-stops',
-        'var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))',
+        'var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))',
       ),
     ],
     position: (value) => [gradientStopProperties(), decl('--tw-gradient-from-position', value)],
@@ -2668,7 +2668,7 @@ export function createUtilities(theme: Theme) {
       decl('--tw-gradient-via', value),
       decl(
         '--tw-gradient-via-stops',
-        'var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position)',
+        'var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position)',
       ),
       decl('--tw-gradient-stops', 'var(--tw-gradient-via-stops)'),
     ],
@@ -2681,7 +2681,7 @@ export function createUtilities(theme: Theme) {
       decl('--tw-gradient-to', value),
       decl(
         '--tw-gradient-stops',
-        'var(--tw-gradient-via-stops, var(--tw-gradient-position,) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))',
+        'var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))',
       ),
     ],
     position: (value) => [gradientStopProperties(), decl('--tw-gradient-to-position', value)],
diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index 2595d9982b93..53d8a71c9a48 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -157,6 +157,10 @@ for (let [classes, expected] of [
     'bg-radial-[at_0%_0%,var(--color-red),transparent]',
     'radial-gradient(at 0% 0%, rgb(255, 0, 0), rgba(0, 0, 0, 0))',
   ],
+  [
+    'bg-radial-[at_center] from-red to-green',
+    'radial-gradient(rgb(255, 0, 0) 0%, rgb(0, 255, 0) 100%)',
+  ],
 ]) {
   test(`radial gradient, "${classes}"`, async ({ page }) => {
     let { getPropertyValue } = await render(