From cca9890dd354f592c2a4b3fa860153e3cee95d3a Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Tue, 12 Nov 2024 15:59:09 -0500
Subject: [PATCH 1/7] Refactor bg-linear static utilities to functional utility

---
 packages/tailwindcss/src/utilities.test.ts |   9 ++
 packages/tailwindcss/src/utilities.ts      | 119 ++++++++++++---------
 2 files changed, 78 insertions(+), 50 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 88f57077b490..a95d3c7b97af 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -10086,6 +10086,15 @@ test('bg', async () => {
         'bg-linear-45',
         '-bg-linear-45',
 
+        // With interpolation mode modifier
+        'bg-linear-to-r/oklch',
+        'bg-linear-to-r/oklab',
+        'bg-linear-to-r/hsl',
+        'bg-linear-to-r/srgb',
+        'bg-linear-to-r/longer',
+        'bg-linear-to-r/shorter',
+        'bg-linear-to-r/[in_hsl_longer_hue]',
+
         'bg-[url(/image.png)]',
         'bg-[url:var(--my-url)]',
         'bg-[linear-gradient(to_bottom,red,blue)]',
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 968f629e37ce..4f1942251976 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2261,69 +2261,88 @@ export function createUtilities(theme: Theme) {
 
   staticUtility('bg-none', [['background-image', 'none']])
 
-  for (let [value, direction] of [
-    ['t', 'top'],
-    ['tr', 'top right'],
-    ['r', 'right'],
-    ['br', 'bottom right'],
-    ['b', 'bottom'],
-    ['bl', 'bottom left'],
-    ['l', 'left'],
-    ['tl', 'top left'],
-  ]) {
-    staticUtility(`bg-gradient-to-${value}`, [
-      ['--tw-gradient-position', `to ${direction} in oklch,`],
-      ['background-image', `linear-gradient(var(--tw-gradient-stops))`],
-    ])
+  {
+    // Deprecated
+    for (let [value, direction] of [
+      ['t', 'top'],
+      ['tr', 'top right'],
+      ['r', 'right'],
+      ['br', 'bottom right'],
+      ['b', 'bottom'],
+      ['bl', 'bottom left'],
+      ['l', 'left'],
+      ['tl', 'top left'],
+    ]) {
+      staticUtility(`bg-gradient-to-${value}`, [
+        ['--tw-gradient-position', `to ${direction} in oklch,`],
+        ['background-image', `linear-gradient(var(--tw-gradient-stops))`],
+      ])
+    }
 
-    staticUtility(`bg-linear-to-${value}`, [
-      ['--tw-gradient-position', `to ${direction} in oklch,`],
-      ['background-image', `linear-gradient(var(--tw-gradient-stops))`],
+    let linearGradientDirections = new Map([
+      ['to-t', 'to top'],
+      ['to-tr', 'to top right'],
+      ['to-r', 'to right'],
+      ['to-br', 'to bottom right'],
+      ['to-b', 'to bottom'],
+      ['to-bl', 'to bottom left'],
+      ['to-l', 'to left'],
+      ['to-tl', 'to top left'],
     ])
-  }
 
-  function handleBgLinear({ negative }: { negative: boolean }) {
-    return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
-      if (!candidate.value || candidate.modifier) return
+    function handleBgLinear({ negative }: { negative: boolean }) {
+      return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
+        if (!candidate.value || candidate.modifier) return
 
-      let value = candidate.value.value
+        let value = candidate.value.value
 
-      if (candidate.value.kind === 'arbitrary') {
-        let type = candidate.value.dataType ?? inferDataType(value, ['angle'])
+        if (candidate.value.kind === 'arbitrary') {
+          let type = candidate.value.dataType ?? inferDataType(value, ['angle'])
 
-        switch (type) {
-          case 'angle': {
-            value = negative ? `calc(${value} * -1)` : `${value}`
+          switch (type) {
+            case 'angle': {
+              value = negative ? `calc(${value} * -1)` : `${value}`
 
-            return [
-              decl('--tw-gradient-position', `${value},`),
-              decl('background-image', `linear-gradient(var(--tw-gradient-stops,${value}))`),
-            ]
-          }
-          default: {
-            if (negative) return
+              return [
+                decl('--tw-gradient-position', `${value},`),
+                decl('background-image', `linear-gradient(var(--tw-gradient-stops,${value}))`),
+              ]
+            }
+            default: {
+              if (negative) return
 
-            return [
-              decl('--tw-gradient-position', `${value},`),
-              decl('background-image', `linear-gradient(var(--tw-gradient-stops,${value}))`),
-            ]
+              return [
+                decl('--tw-gradient-position', `${value},`),
+                decl('background-image', `linear-gradient(var(--tw-gradient-stops,${value}))`),
+              ]
+            }
+          }
+        } else {
+          if (!negative && linearGradientDirections.has(value)) {
+            value = linearGradientDirections.get(value)!
+          } else if (isPositiveInteger(value)) {
+            value = negative ? `calc(${value}deg * -1)` : `${value}deg`
+          } else {
+            return
           }
-        }
-      } else {
-        if (!isPositiveInteger(value)) return
-
-        value = negative ? `calc(${value}deg * -1)` : `${value}deg`
 
-        return [
-          decl('--tw-gradient-position', `${value} in oklch,`),
-          decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
-        ]
+          return [
+            decl('--tw-gradient-position', `${value} in oklch,`),
+            decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
+          ]
+        }
       }
     }
-  }
 
-  utilities.functional('-bg-linear', handleBgLinear({ negative: true }))
-  utilities.functional('bg-linear', handleBgLinear({ negative: false }))
+    utilities.functional('-bg-linear', handleBgLinear({ negative: true }))
+    utilities.functional('bg-linear', handleBgLinear({ negative: false }))
+
+    suggest('bg-linear', () => [
+      {
+        values: [...linearGradientDirections.keys()],
+      },
+    ])
+  }
 
   function handleBgConic({ negative }: { negative: boolean }) {
     return (candidate: Extract<Candidate, { kind: 'functional' }>) => {

From 4070a27fcad7ce5fa396c990d8d134038fe5b64e Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Tue, 12 Nov 2024 16:33:44 -0500
Subject: [PATCH 2/7] Support interpolation method as modifier on `bg-linear-*`
 utilities

---
 packages/tailwindcss/src/utilities.test.ts | 79 ++++++++++++++++------
 packages/tailwindcss/src/utilities.ts      | 21 +++++-
 2 files changed, 78 insertions(+), 22 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index a95d3c7b97af..f9865687c22a 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -10093,7 +10093,16 @@ test('bg', async () => {
         'bg-linear-to-r/srgb',
         'bg-linear-to-r/longer',
         'bg-linear-to-r/shorter',
+        'bg-linear-to-r/increasing',
+        'bg-linear-to-r/decreasing',
         'bg-linear-to-r/[in_hsl_longer_hue]',
+        'bg-linear-[125deg]/oklab',
+        '-bg-linear-[125deg]/oklab',
+        'bg-linear-[125deg]/shorter',
+        'bg-linear-[125deg]/[in_hsl_longer_hue]',
+        // Invalid but proves not converted to `in oklch longer hue` when used
+        // as an arbitrary value
+        'bg-linear-to-r/[longer]',
 
         'bg-[url(/image.png)]',
         'bg-[url:var(--my-url)]',
@@ -10312,6 +10321,56 @@ test('bg', async () => {
       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, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-to-r\\/\\[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, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-to-r\\/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, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-to-r\\/longer {
+      --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, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-to-r\\/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, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-to-r\\/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 oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
@@ -10507,31 +10566,11 @@ test('bg', async () => {
       '-bg-space',
 
       'bg-none/foo',
-      'bg-gradient-to-t/foo',
-      'bg-gradient-to-tr/foo',
-      'bg-gradient-to-r/foo',
-      'bg-gradient-to-br/foo',
-      'bg-gradient-to-b/foo',
-      'bg-gradient-to-bl/foo',
-      'bg-gradient-to-l/foo',
-      'bg-gradient-to-tl/foo',
-      'bg-linear-to-t/foo',
-      'bg-linear-to-tr/foo',
-      'bg-linear-to-r/foo',
-      'bg-linear-to-br/foo',
-      'bg-linear-to-b/foo',
-      'bg-linear-to-bl/foo',
-      'bg-linear-to-l/foo',
-      'bg-linear-to-tl/foo',
       'bg-[url(/image.png)]/foo',
       'bg-[url:var(--my-url)]/foo',
       'bg-[linear-gradient(to_bottom,red,blue)]/foo',
       'bg-[image:var(--my-gradient)]/foo',
-      'bg-linear-[125deg]/foo',
-      'bg-linear-[1.3rad]/foo',
       'bg-linear-[to_bottom]/foo',
-      '-bg-linear-[125deg]/foo',
-      '-bg-linear-[1.3rad]/foo',
       'bg-auto/foo',
       'bg-cover/foo',
       'bg-contain/foo',
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 4f1942251976..141560ee97b9 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2292,11 +2292,28 @@ export function createUtilities(theme: Theme) {
 
     function handleBgLinear({ negative }: { negative: boolean }) {
       return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
-        if (!candidate.value || candidate.modifier) return
+        if (!candidate.value) return
 
         let value = candidate.value.value
+        let interpolationMethod = 'in oklch'
+
+        if (candidate.modifier?.kind === 'named') {
+          switch (candidate.modifier.value) {
+            case 'longer':
+            case 'shorter':
+            case 'increasing':
+            case 'decreasing':
+              interpolationMethod = `in oklch ${candidate.modifier.value} hue`
+              break
+            default:
+              interpolationMethod = `in ${candidate.modifier.value}`
+          }
+        } else if (candidate.modifier?.kind === 'arbitrary') {
+          interpolationMethod = candidate.modifier.value
+        }
 
         if (candidate.value.kind === 'arbitrary') {
+          if (candidate.modifier) return
           let type = candidate.value.dataType ?? inferDataType(value, ['angle'])
 
           switch (type) {
@@ -2327,7 +2344,7 @@ export function createUtilities(theme: Theme) {
           }
 
           return [
-            decl('--tw-gradient-position', `${value} in oklch,`),
+            decl('--tw-gradient-position', `${value} ${interpolationMethod},`),
             decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
           ]
         }

From ac5759ab29f50f298aed845c379daacdcf4be01c Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Tue, 12 Nov 2024 16:39:23 -0500
Subject: [PATCH 3/7] Suggest angles for linear gradient utilities

---
 .../__snapshots__/intellisense.test.ts.snap   | 24 +++++++++++++++++++
 packages/tailwindcss/src/utilities.ts         |  4 ++++
 2 files changed, 28 insertions(+)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index d96b027f3425..934a04c361ab 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -2,6 +2,18 @@
 
 exports[`getClassList 1`] = `
 [
+  "-bg-linear-0",
+  "-bg-linear-120",
+  "-bg-linear-150",
+  "-bg-linear-180",
+  "-bg-linear-210",
+  "-bg-linear-240",
+  "-bg-linear-270",
+  "-bg-linear-30",
+  "-bg-linear-300",
+  "-bg-linear-330",
+  "-bg-linear-60",
+  "-bg-linear-90",
   "-bottom-0",
   "-bottom-0.5",
   "-bottom-1",
@@ -1657,6 +1669,18 @@ exports[`getClassList 1`] = `
   "bg-left",
   "bg-left-bottom",
   "bg-left-top",
+  "bg-linear-0",
+  "bg-linear-120",
+  "bg-linear-150",
+  "bg-linear-180",
+  "bg-linear-210",
+  "bg-linear-240",
+  "bg-linear-270",
+  "bg-linear-30",
+  "bg-linear-300",
+  "bg-linear-330",
+  "bg-linear-60",
+  "bg-linear-90",
   "bg-linear-to-b",
   "bg-linear-to-bl",
   "bg-linear-to-br",
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 141560ee97b9..7318ddd4321b 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2358,6 +2358,10 @@ export function createUtilities(theme: Theme) {
       {
         values: [...linearGradientDirections.keys()],
       },
+      {
+        values: ['0', '30', '60', '90', '120', '150', '180', '210', '240', '270', '300', '330'],
+        supportsNegative: true,
+      },
     ])
   }
 

From 5eb0943bfb59f9f44beafc4378b61b0f36fe25c7 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Tue, 12 Nov 2024 20:22:24 -0500
Subject: [PATCH 4/7] Support interpolation modifier on `bg-conic-*` utilities

---
 packages/tailwindcss/src/utilities.test.ts | 109 ++++++++++++++++++++-
 packages/tailwindcss/src/utilities.ts      |  82 +++++++++-------
 2 files changed, 149 insertions(+), 42 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index f9865687c22a..1838e2348726 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -10096,10 +10096,23 @@ test('bg', async () => {
         'bg-linear-to-r/increasing',
         'bg-linear-to-r/decreasing',
         'bg-linear-to-r/[in_hsl_longer_hue]',
-        'bg-linear-[125deg]/oklab',
-        '-bg-linear-[125deg]/oklab',
-        'bg-linear-[125deg]/shorter',
-        'bg-linear-[125deg]/[in_hsl_longer_hue]',
+        'bg-linear-45/oklab',
+        '-bg-linear-45/oklab',
+        'bg-linear-45/shorter',
+        'bg-linear-45/[in_hsl_longer_hue]',
+        'bg-conic/oklch',
+        'bg-conic/oklab',
+        'bg-conic/hsl',
+        'bg-conic/srgb',
+        'bg-conic/longer',
+        'bg-conic/shorter',
+        'bg-conic/increasing',
+        'bg-conic/decreasing',
+        'bg-conic/[in_hsl_longer_hue]',
+        'bg-conic-45/oklab',
+        '-bg-conic-45/oklab',
+        'bg-conic-45/shorter',
+        'bg-conic-45/[in_hsl_longer_hue]',
         // Invalid but proves not converted to `in oklch longer hue` when used
         // as an arbitrary value
         'bg-linear-to-r/[longer]',
@@ -10221,11 +10234,21 @@ test('bg', async () => {
       background-color: #0000;
     }
 
+    .-bg-conic-45\\/oklab {
+      --tw-gradient-position: from calc(45 * -1) in oklab, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
     .-bg-linear-45 {
       --tw-gradient-position: calc(45deg * -1) in oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    .-bg-linear-45\\/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), ;
       background-image: linear-gradient(var(--tw-gradient-stops, calc(74.4845deg * -1)));
@@ -10236,6 +10259,66 @@ test('bg', async () => {
       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, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic-45\\/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, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/\\[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, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/hsl {
+      --tw-gradient-position: in hsl, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/increasing {
+      --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, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/oklab {
+      --tw-gradient-position: in oklab, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/oklch {
+      --tw-gradient-position: in oklch, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/shorter {
+      --tw-gradient-position: in oklch shorter hue, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/srgb {
+      --tw-gradient-position: in srgb, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
     .bg-gradient-to-b {
       --tw-gradient-position: to bottom in oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
@@ -10281,6 +10364,21 @@ test('bg', async () => {
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    .bg-linear-45\\/\\[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, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-45\\/shorter {
+      --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, ;
       background-image: linear-gradient(var(--tw-gradient-stops, 74.4845deg));
@@ -10570,7 +10668,8 @@ test('bg', async () => {
       'bg-[url:var(--my-url)]/foo',
       'bg-[linear-gradient(to_bottom,red,blue)]/foo',
       'bg-[image:var(--my-gradient)]/foo',
-      'bg-linear-[to_bottom]/foo',
+      'bg-linear-[to_bottom]/hsl',
+      'bg-conic-[45deg]/hsl',
       'bg-auto/foo',
       'bg-cover/foo',
       'bg-contain/foo',
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 7318ddd4321b..75d0f7f8ac90 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2290,27 +2290,33 @@ export function createUtilities(theme: Theme) {
       ['to-tl', 'to top left'],
     ])
 
+    function resolveInterpolationModifier(modifier: CandidateModifier | null) {
+      let interpolationMethod = 'in oklch'
+
+      if (modifier?.kind === 'named') {
+        switch (modifier.value) {
+          case 'longer':
+          case 'shorter':
+          case 'increasing':
+          case 'decreasing':
+            interpolationMethod = `in oklch ${modifier.value} hue`
+            break
+          default:
+            interpolationMethod = `in ${modifier.value}`
+        }
+      } else if (modifier?.kind === 'arbitrary') {
+        interpolationMethod = modifier.value
+      }
+
+      return interpolationMethod
+    }
+
     function handleBgLinear({ negative }: { negative: boolean }) {
       return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
         if (!candidate.value) return
 
         let value = candidate.value.value
-        let interpolationMethod = 'in oklch'
-
-        if (candidate.modifier?.kind === 'named') {
-          switch (candidate.modifier.value) {
-            case 'longer':
-            case 'shorter':
-            case 'increasing':
-            case 'decreasing':
-              interpolationMethod = `in oklch ${candidate.modifier.value} hue`
-              break
-            default:
-              interpolationMethod = `in ${candidate.modifier.value}`
-          }
-        } else if (candidate.modifier?.kind === 'arbitrary') {
-          interpolationMethod = candidate.modifier.value
-        }
+        let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
 
         if (candidate.value.kind === 'arbitrary') {
           if (candidate.modifier) return
@@ -2363,41 +2369,43 @@ export function createUtilities(theme: Theme) {
         supportsNegative: true,
       },
     ])
-  }
 
-  function handleBgConic({ negative }: { negative: boolean }) {
-    return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
-      if (candidate.modifier) return
+    function handleBgConic({ negative }: { negative: boolean }) {
+      return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
+        if (candidate.value?.kind === 'arbitrary' && candidate.modifier) return
 
-      if (!candidate.value) {
-        return [
-          decl('--tw-gradient-position', `in oklch,`),
-          decl('background-image', `conic-gradient(var(--tw-gradient-stops))`),
-        ]
-      }
+        let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
 
-      let value = candidate.value.value
+        if (!candidate.value) {
+          return [
+            decl('--tw-gradient-position', `${interpolationMethod},`),
+            decl('background-image', `conic-gradient(var(--tw-gradient-stops))`),
+          ]
+        }
+
+        let value = candidate.value.value
+
+        if (candidate.value.kind === 'arbitrary') {
+          return [
+            decl('--tw-gradient-position', `${value},`),
+            decl('background-image', `conic-gradient(var(--tw-gradient-stops,${value}))`),
+          ]
+        }
 
-      if (candidate.value.kind === 'arbitrary') {
-        return [
-          decl('--tw-gradient-position', `${value},`),
-          decl('background-image', `conic-gradient(var(--tw-gradient-stops,${value}))`),
-        ]
-      } else {
         if (!isPositiveInteger(value)) return
 
         value = negative ? `calc(${value} * -1)` : `${value}deg`
 
         return [
-          decl('--tw-gradient-position', `from ${value} in oklch,`),
+          decl('--tw-gradient-position', `from ${value} ${interpolationMethod},`),
           decl('background-image', `conic-gradient(var(--tw-gradient-stops))`),
         ]
       }
     }
-  }
 
-  utilities.functional('-bg-conic', handleBgConic({ negative: true }))
-  utilities.functional('bg-conic', handleBgConic({ negative: false }))
+    utilities.functional('-bg-conic', handleBgConic({ negative: true }))
+    utilities.functional('bg-conic', handleBgConic({ negative: false }))
+  }
 
   utilities.functional('bg-radial', (candidate) => {
     if (candidate.modifier) return

From 16c63416fa0cb532b8b3e1168451c93f0dd1953c Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Tue, 12 Nov 2024 20:23:52 -0500
Subject: [PATCH 5/7] Add suggestions

---
 .../__snapshots__/intellisense.test.ts.snap   | 25 +++++++++++++++++++
 packages/tailwindcss/src/utilities.ts         | 10 ++++++++
 2 files changed, 35 insertions(+)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index 934a04c361ab..84ace7b9089d 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -2,6 +2,18 @@
 
 exports[`getClassList 1`] = `
 [
+  "-bg-conic-0",
+  "-bg-conic-120",
+  "-bg-conic-150",
+  "-bg-conic-180",
+  "-bg-conic-210",
+  "-bg-conic-240",
+  "-bg-conic-270",
+  "-bg-conic-30",
+  "-bg-conic-300",
+  "-bg-conic-330",
+  "-bg-conic-60",
+  "-bg-conic-90",
   "-bg-linear-0",
   "-bg-linear-120",
   "-bg-linear-150",
@@ -1611,6 +1623,19 @@ exports[`getClassList 1`] = `
   "bg-clip-content",
   "bg-clip-padding",
   "bg-clip-text",
+  "bg-conic",
+  "bg-conic-0",
+  "bg-conic-120",
+  "bg-conic-150",
+  "bg-conic-180",
+  "bg-conic-210",
+  "bg-conic-240",
+  "bg-conic-270",
+  "bg-conic-30",
+  "bg-conic-300",
+  "bg-conic-330",
+  "bg-conic-60",
+  "bg-conic-90",
   "bg-contain",
   "bg-cover",
   "bg-current",
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 75d0f7f8ac90..ce19d6f58128 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2405,6 +2405,16 @@ export function createUtilities(theme: Theme) {
 
     utilities.functional('-bg-conic', handleBgConic({ negative: true }))
     utilities.functional('bg-conic', handleBgConic({ negative: false }))
+
+    suggest('bg-conic', () => [
+      {
+        hasDefaultValue: true,
+      },
+      {
+        values: ['0', '30', '60', '90', '120', '150', '180', '210', '240', '270', '300', '330'],
+        supportsNegative: true,
+      },
+    ])
   }
 
   utilities.functional('bg-radial', (candidate) => {

From f49fa9934c468d17e17ba8427bf1abf318710f64 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Tue, 12 Nov 2024 20:35:16 -0500
Subject: [PATCH 6/7] Add interpolation modifier support for radial gradients,
 more suggestions

---
 .../__snapshots__/intellisense.test.ts.snap   | 465 ++++++++++++++++++
 packages/tailwindcss/src/utilities.test.ts    |  61 +++
 packages/tailwindcss/src/utilities.ts         | 105 ++--
 3 files changed, 591 insertions(+), 40 deletions(-)

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index 84ace7b9089d..2d4cdf5c5bdb 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -3,29 +3,221 @@
 exports[`getClassList 1`] = `
 [
   "-bg-conic-0",
+  "-bg-conic-0/oklab",
+  "-bg-conic-0/oklch",
+  "-bg-conic-0/srgb",
+  "-bg-conic-0/hsl",
+  "-bg-conic-0/longer",
+  "-bg-conic-0/shorter",
+  "-bg-conic-0/increasing",
+  "-bg-conic-0/decreasing",
   "-bg-conic-120",
+  "-bg-conic-120/oklab",
+  "-bg-conic-120/oklch",
+  "-bg-conic-120/srgb",
+  "-bg-conic-120/hsl",
+  "-bg-conic-120/longer",
+  "-bg-conic-120/shorter",
+  "-bg-conic-120/increasing",
+  "-bg-conic-120/decreasing",
   "-bg-conic-150",
+  "-bg-conic-150/oklab",
+  "-bg-conic-150/oklch",
+  "-bg-conic-150/srgb",
+  "-bg-conic-150/hsl",
+  "-bg-conic-150/longer",
+  "-bg-conic-150/shorter",
+  "-bg-conic-150/increasing",
+  "-bg-conic-150/decreasing",
   "-bg-conic-180",
+  "-bg-conic-180/oklab",
+  "-bg-conic-180/oklch",
+  "-bg-conic-180/srgb",
+  "-bg-conic-180/hsl",
+  "-bg-conic-180/longer",
+  "-bg-conic-180/shorter",
+  "-bg-conic-180/increasing",
+  "-bg-conic-180/decreasing",
   "-bg-conic-210",
+  "-bg-conic-210/oklab",
+  "-bg-conic-210/oklch",
+  "-bg-conic-210/srgb",
+  "-bg-conic-210/hsl",
+  "-bg-conic-210/longer",
+  "-bg-conic-210/shorter",
+  "-bg-conic-210/increasing",
+  "-bg-conic-210/decreasing",
   "-bg-conic-240",
+  "-bg-conic-240/oklab",
+  "-bg-conic-240/oklch",
+  "-bg-conic-240/srgb",
+  "-bg-conic-240/hsl",
+  "-bg-conic-240/longer",
+  "-bg-conic-240/shorter",
+  "-bg-conic-240/increasing",
+  "-bg-conic-240/decreasing",
   "-bg-conic-270",
+  "-bg-conic-270/oklab",
+  "-bg-conic-270/oklch",
+  "-bg-conic-270/srgb",
+  "-bg-conic-270/hsl",
+  "-bg-conic-270/longer",
+  "-bg-conic-270/shorter",
+  "-bg-conic-270/increasing",
+  "-bg-conic-270/decreasing",
   "-bg-conic-30",
+  "-bg-conic-30/oklab",
+  "-bg-conic-30/oklch",
+  "-bg-conic-30/srgb",
+  "-bg-conic-30/hsl",
+  "-bg-conic-30/longer",
+  "-bg-conic-30/shorter",
+  "-bg-conic-30/increasing",
+  "-bg-conic-30/decreasing",
   "-bg-conic-300",
+  "-bg-conic-300/oklab",
+  "-bg-conic-300/oklch",
+  "-bg-conic-300/srgb",
+  "-bg-conic-300/hsl",
+  "-bg-conic-300/longer",
+  "-bg-conic-300/shorter",
+  "-bg-conic-300/increasing",
+  "-bg-conic-300/decreasing",
   "-bg-conic-330",
+  "-bg-conic-330/oklab",
+  "-bg-conic-330/oklch",
+  "-bg-conic-330/srgb",
+  "-bg-conic-330/hsl",
+  "-bg-conic-330/longer",
+  "-bg-conic-330/shorter",
+  "-bg-conic-330/increasing",
+  "-bg-conic-330/decreasing",
   "-bg-conic-60",
+  "-bg-conic-60/oklab",
+  "-bg-conic-60/oklch",
+  "-bg-conic-60/srgb",
+  "-bg-conic-60/hsl",
+  "-bg-conic-60/longer",
+  "-bg-conic-60/shorter",
+  "-bg-conic-60/increasing",
+  "-bg-conic-60/decreasing",
   "-bg-conic-90",
+  "-bg-conic-90/oklab",
+  "-bg-conic-90/oklch",
+  "-bg-conic-90/srgb",
+  "-bg-conic-90/hsl",
+  "-bg-conic-90/longer",
+  "-bg-conic-90/shorter",
+  "-bg-conic-90/increasing",
+  "-bg-conic-90/decreasing",
   "-bg-linear-0",
+  "-bg-linear-0/oklab",
+  "-bg-linear-0/oklch",
+  "-bg-linear-0/srgb",
+  "-bg-linear-0/hsl",
+  "-bg-linear-0/longer",
+  "-bg-linear-0/shorter",
+  "-bg-linear-0/increasing",
+  "-bg-linear-0/decreasing",
   "-bg-linear-120",
+  "-bg-linear-120/oklab",
+  "-bg-linear-120/oklch",
+  "-bg-linear-120/srgb",
+  "-bg-linear-120/hsl",
+  "-bg-linear-120/longer",
+  "-bg-linear-120/shorter",
+  "-bg-linear-120/increasing",
+  "-bg-linear-120/decreasing",
   "-bg-linear-150",
+  "-bg-linear-150/oklab",
+  "-bg-linear-150/oklch",
+  "-bg-linear-150/srgb",
+  "-bg-linear-150/hsl",
+  "-bg-linear-150/longer",
+  "-bg-linear-150/shorter",
+  "-bg-linear-150/increasing",
+  "-bg-linear-150/decreasing",
   "-bg-linear-180",
+  "-bg-linear-180/oklab",
+  "-bg-linear-180/oklch",
+  "-bg-linear-180/srgb",
+  "-bg-linear-180/hsl",
+  "-bg-linear-180/longer",
+  "-bg-linear-180/shorter",
+  "-bg-linear-180/increasing",
+  "-bg-linear-180/decreasing",
   "-bg-linear-210",
+  "-bg-linear-210/oklab",
+  "-bg-linear-210/oklch",
+  "-bg-linear-210/srgb",
+  "-bg-linear-210/hsl",
+  "-bg-linear-210/longer",
+  "-bg-linear-210/shorter",
+  "-bg-linear-210/increasing",
+  "-bg-linear-210/decreasing",
   "-bg-linear-240",
+  "-bg-linear-240/oklab",
+  "-bg-linear-240/oklch",
+  "-bg-linear-240/srgb",
+  "-bg-linear-240/hsl",
+  "-bg-linear-240/longer",
+  "-bg-linear-240/shorter",
+  "-bg-linear-240/increasing",
+  "-bg-linear-240/decreasing",
   "-bg-linear-270",
+  "-bg-linear-270/oklab",
+  "-bg-linear-270/oklch",
+  "-bg-linear-270/srgb",
+  "-bg-linear-270/hsl",
+  "-bg-linear-270/longer",
+  "-bg-linear-270/shorter",
+  "-bg-linear-270/increasing",
+  "-bg-linear-270/decreasing",
   "-bg-linear-30",
+  "-bg-linear-30/oklab",
+  "-bg-linear-30/oklch",
+  "-bg-linear-30/srgb",
+  "-bg-linear-30/hsl",
+  "-bg-linear-30/longer",
+  "-bg-linear-30/shorter",
+  "-bg-linear-30/increasing",
+  "-bg-linear-30/decreasing",
   "-bg-linear-300",
+  "-bg-linear-300/oklab",
+  "-bg-linear-300/oklch",
+  "-bg-linear-300/srgb",
+  "-bg-linear-300/hsl",
+  "-bg-linear-300/longer",
+  "-bg-linear-300/shorter",
+  "-bg-linear-300/increasing",
+  "-bg-linear-300/decreasing",
   "-bg-linear-330",
+  "-bg-linear-330/oklab",
+  "-bg-linear-330/oklch",
+  "-bg-linear-330/srgb",
+  "-bg-linear-330/hsl",
+  "-bg-linear-330/longer",
+  "-bg-linear-330/shorter",
+  "-bg-linear-330/increasing",
+  "-bg-linear-330/decreasing",
   "-bg-linear-60",
+  "-bg-linear-60/oklab",
+  "-bg-linear-60/oklch",
+  "-bg-linear-60/srgb",
+  "-bg-linear-60/hsl",
+  "-bg-linear-60/longer",
+  "-bg-linear-60/shorter",
+  "-bg-linear-60/increasing",
+  "-bg-linear-60/decreasing",
   "-bg-linear-90",
+  "-bg-linear-90/oklab",
+  "-bg-linear-90/oklch",
+  "-bg-linear-90/srgb",
+  "-bg-linear-90/hsl",
+  "-bg-linear-90/longer",
+  "-bg-linear-90/shorter",
+  "-bg-linear-90/increasing",
+  "-bg-linear-90/decreasing",
   "-bottom-0",
   "-bottom-0.5",
   "-bottom-1",
@@ -1624,18 +1816,122 @@ exports[`getClassList 1`] = `
   "bg-clip-padding",
   "bg-clip-text",
   "bg-conic",
+  "bg-conic/oklab",
+  "bg-conic/oklch",
+  "bg-conic/srgb",
+  "bg-conic/hsl",
+  "bg-conic/longer",
+  "bg-conic/shorter",
+  "bg-conic/increasing",
+  "bg-conic/decreasing",
   "bg-conic-0",
+  "bg-conic-0/oklab",
+  "bg-conic-0/oklch",
+  "bg-conic-0/srgb",
+  "bg-conic-0/hsl",
+  "bg-conic-0/longer",
+  "bg-conic-0/shorter",
+  "bg-conic-0/increasing",
+  "bg-conic-0/decreasing",
   "bg-conic-120",
+  "bg-conic-120/oklab",
+  "bg-conic-120/oklch",
+  "bg-conic-120/srgb",
+  "bg-conic-120/hsl",
+  "bg-conic-120/longer",
+  "bg-conic-120/shorter",
+  "bg-conic-120/increasing",
+  "bg-conic-120/decreasing",
   "bg-conic-150",
+  "bg-conic-150/oklab",
+  "bg-conic-150/oklch",
+  "bg-conic-150/srgb",
+  "bg-conic-150/hsl",
+  "bg-conic-150/longer",
+  "bg-conic-150/shorter",
+  "bg-conic-150/increasing",
+  "bg-conic-150/decreasing",
   "bg-conic-180",
+  "bg-conic-180/oklab",
+  "bg-conic-180/oklch",
+  "bg-conic-180/srgb",
+  "bg-conic-180/hsl",
+  "bg-conic-180/longer",
+  "bg-conic-180/shorter",
+  "bg-conic-180/increasing",
+  "bg-conic-180/decreasing",
   "bg-conic-210",
+  "bg-conic-210/oklab",
+  "bg-conic-210/oklch",
+  "bg-conic-210/srgb",
+  "bg-conic-210/hsl",
+  "bg-conic-210/longer",
+  "bg-conic-210/shorter",
+  "bg-conic-210/increasing",
+  "bg-conic-210/decreasing",
   "bg-conic-240",
+  "bg-conic-240/oklab",
+  "bg-conic-240/oklch",
+  "bg-conic-240/srgb",
+  "bg-conic-240/hsl",
+  "bg-conic-240/longer",
+  "bg-conic-240/shorter",
+  "bg-conic-240/increasing",
+  "bg-conic-240/decreasing",
   "bg-conic-270",
+  "bg-conic-270/oklab",
+  "bg-conic-270/oklch",
+  "bg-conic-270/srgb",
+  "bg-conic-270/hsl",
+  "bg-conic-270/longer",
+  "bg-conic-270/shorter",
+  "bg-conic-270/increasing",
+  "bg-conic-270/decreasing",
   "bg-conic-30",
+  "bg-conic-30/oklab",
+  "bg-conic-30/oklch",
+  "bg-conic-30/srgb",
+  "bg-conic-30/hsl",
+  "bg-conic-30/longer",
+  "bg-conic-30/shorter",
+  "bg-conic-30/increasing",
+  "bg-conic-30/decreasing",
   "bg-conic-300",
+  "bg-conic-300/oklab",
+  "bg-conic-300/oklch",
+  "bg-conic-300/srgb",
+  "bg-conic-300/hsl",
+  "bg-conic-300/longer",
+  "bg-conic-300/shorter",
+  "bg-conic-300/increasing",
+  "bg-conic-300/decreasing",
   "bg-conic-330",
+  "bg-conic-330/oklab",
+  "bg-conic-330/oklch",
+  "bg-conic-330/srgb",
+  "bg-conic-330/hsl",
+  "bg-conic-330/longer",
+  "bg-conic-330/shorter",
+  "bg-conic-330/increasing",
+  "bg-conic-330/decreasing",
   "bg-conic-60",
+  "bg-conic-60/oklab",
+  "bg-conic-60/oklch",
+  "bg-conic-60/srgb",
+  "bg-conic-60/hsl",
+  "bg-conic-60/longer",
+  "bg-conic-60/shorter",
+  "bg-conic-60/increasing",
+  "bg-conic-60/decreasing",
   "bg-conic-90",
+  "bg-conic-90/oklab",
+  "bg-conic-90/oklch",
+  "bg-conic-90/srgb",
+  "bg-conic-90/hsl",
+  "bg-conic-90/longer",
+  "bg-conic-90/shorter",
+  "bg-conic-90/increasing",
+  "bg-conic-90/decreasing",
   "bg-contain",
   "bg-cover",
   "bg-current",
@@ -1695,31 +1991,200 @@ exports[`getClassList 1`] = `
   "bg-left-bottom",
   "bg-left-top",
   "bg-linear-0",
+  "bg-linear-0/oklab",
+  "bg-linear-0/oklch",
+  "bg-linear-0/srgb",
+  "bg-linear-0/hsl",
+  "bg-linear-0/longer",
+  "bg-linear-0/shorter",
+  "bg-linear-0/increasing",
+  "bg-linear-0/decreasing",
   "bg-linear-120",
+  "bg-linear-120/oklab",
+  "bg-linear-120/oklch",
+  "bg-linear-120/srgb",
+  "bg-linear-120/hsl",
+  "bg-linear-120/longer",
+  "bg-linear-120/shorter",
+  "bg-linear-120/increasing",
+  "bg-linear-120/decreasing",
   "bg-linear-150",
+  "bg-linear-150/oklab",
+  "bg-linear-150/oklch",
+  "bg-linear-150/srgb",
+  "bg-linear-150/hsl",
+  "bg-linear-150/longer",
+  "bg-linear-150/shorter",
+  "bg-linear-150/increasing",
+  "bg-linear-150/decreasing",
   "bg-linear-180",
+  "bg-linear-180/oklab",
+  "bg-linear-180/oklch",
+  "bg-linear-180/srgb",
+  "bg-linear-180/hsl",
+  "bg-linear-180/longer",
+  "bg-linear-180/shorter",
+  "bg-linear-180/increasing",
+  "bg-linear-180/decreasing",
   "bg-linear-210",
+  "bg-linear-210/oklab",
+  "bg-linear-210/oklch",
+  "bg-linear-210/srgb",
+  "bg-linear-210/hsl",
+  "bg-linear-210/longer",
+  "bg-linear-210/shorter",
+  "bg-linear-210/increasing",
+  "bg-linear-210/decreasing",
   "bg-linear-240",
+  "bg-linear-240/oklab",
+  "bg-linear-240/oklch",
+  "bg-linear-240/srgb",
+  "bg-linear-240/hsl",
+  "bg-linear-240/longer",
+  "bg-linear-240/shorter",
+  "bg-linear-240/increasing",
+  "bg-linear-240/decreasing",
   "bg-linear-270",
+  "bg-linear-270/oklab",
+  "bg-linear-270/oklch",
+  "bg-linear-270/srgb",
+  "bg-linear-270/hsl",
+  "bg-linear-270/longer",
+  "bg-linear-270/shorter",
+  "bg-linear-270/increasing",
+  "bg-linear-270/decreasing",
   "bg-linear-30",
+  "bg-linear-30/oklab",
+  "bg-linear-30/oklch",
+  "bg-linear-30/srgb",
+  "bg-linear-30/hsl",
+  "bg-linear-30/longer",
+  "bg-linear-30/shorter",
+  "bg-linear-30/increasing",
+  "bg-linear-30/decreasing",
   "bg-linear-300",
+  "bg-linear-300/oklab",
+  "bg-linear-300/oklch",
+  "bg-linear-300/srgb",
+  "bg-linear-300/hsl",
+  "bg-linear-300/longer",
+  "bg-linear-300/shorter",
+  "bg-linear-300/increasing",
+  "bg-linear-300/decreasing",
   "bg-linear-330",
+  "bg-linear-330/oklab",
+  "bg-linear-330/oklch",
+  "bg-linear-330/srgb",
+  "bg-linear-330/hsl",
+  "bg-linear-330/longer",
+  "bg-linear-330/shorter",
+  "bg-linear-330/increasing",
+  "bg-linear-330/decreasing",
   "bg-linear-60",
+  "bg-linear-60/oklab",
+  "bg-linear-60/oklch",
+  "bg-linear-60/srgb",
+  "bg-linear-60/hsl",
+  "bg-linear-60/longer",
+  "bg-linear-60/shorter",
+  "bg-linear-60/increasing",
+  "bg-linear-60/decreasing",
   "bg-linear-90",
+  "bg-linear-90/oklab",
+  "bg-linear-90/oklch",
+  "bg-linear-90/srgb",
+  "bg-linear-90/hsl",
+  "bg-linear-90/longer",
+  "bg-linear-90/shorter",
+  "bg-linear-90/increasing",
+  "bg-linear-90/decreasing",
   "bg-linear-to-b",
+  "bg-linear-to-b/oklab",
+  "bg-linear-to-b/oklch",
+  "bg-linear-to-b/srgb",
+  "bg-linear-to-b/hsl",
+  "bg-linear-to-b/longer",
+  "bg-linear-to-b/shorter",
+  "bg-linear-to-b/increasing",
+  "bg-linear-to-b/decreasing",
   "bg-linear-to-bl",
+  "bg-linear-to-bl/oklab",
+  "bg-linear-to-bl/oklch",
+  "bg-linear-to-bl/srgb",
+  "bg-linear-to-bl/hsl",
+  "bg-linear-to-bl/longer",
+  "bg-linear-to-bl/shorter",
+  "bg-linear-to-bl/increasing",
+  "bg-linear-to-bl/decreasing",
   "bg-linear-to-br",
+  "bg-linear-to-br/oklab",
+  "bg-linear-to-br/oklch",
+  "bg-linear-to-br/srgb",
+  "bg-linear-to-br/hsl",
+  "bg-linear-to-br/longer",
+  "bg-linear-to-br/shorter",
+  "bg-linear-to-br/increasing",
+  "bg-linear-to-br/decreasing",
   "bg-linear-to-l",
+  "bg-linear-to-l/oklab",
+  "bg-linear-to-l/oklch",
+  "bg-linear-to-l/srgb",
+  "bg-linear-to-l/hsl",
+  "bg-linear-to-l/longer",
+  "bg-linear-to-l/shorter",
+  "bg-linear-to-l/increasing",
+  "bg-linear-to-l/decreasing",
   "bg-linear-to-r",
+  "bg-linear-to-r/oklab",
+  "bg-linear-to-r/oklch",
+  "bg-linear-to-r/srgb",
+  "bg-linear-to-r/hsl",
+  "bg-linear-to-r/longer",
+  "bg-linear-to-r/shorter",
+  "bg-linear-to-r/increasing",
+  "bg-linear-to-r/decreasing",
   "bg-linear-to-t",
+  "bg-linear-to-t/oklab",
+  "bg-linear-to-t/oklch",
+  "bg-linear-to-t/srgb",
+  "bg-linear-to-t/hsl",
+  "bg-linear-to-t/longer",
+  "bg-linear-to-t/shorter",
+  "bg-linear-to-t/increasing",
+  "bg-linear-to-t/decreasing",
   "bg-linear-to-tl",
+  "bg-linear-to-tl/oklab",
+  "bg-linear-to-tl/oklch",
+  "bg-linear-to-tl/srgb",
+  "bg-linear-to-tl/hsl",
+  "bg-linear-to-tl/longer",
+  "bg-linear-to-tl/shorter",
+  "bg-linear-to-tl/increasing",
+  "bg-linear-to-tl/decreasing",
   "bg-linear-to-tr",
+  "bg-linear-to-tr/oklab",
+  "bg-linear-to-tr/oklch",
+  "bg-linear-to-tr/srgb",
+  "bg-linear-to-tr/hsl",
+  "bg-linear-to-tr/longer",
+  "bg-linear-to-tr/shorter",
+  "bg-linear-to-tr/increasing",
+  "bg-linear-to-tr/decreasing",
   "bg-local",
   "bg-no-repeat",
   "bg-none",
   "bg-origin-border",
   "bg-origin-content",
   "bg-origin-padding",
+  "bg-radial",
+  "bg-radial/oklab",
+  "bg-radial/oklch",
+  "bg-radial/srgb",
+  "bg-radial/hsl",
+  "bg-radial/longer",
+  "bg-radial/shorter",
+  "bg-radial/increasing",
+  "bg-radial/decreasing",
   "bg-repeat",
   "bg-repeat-x",
   "bg-repeat-y",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 1838e2348726..dfe1535408dc 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -10113,6 +10113,16 @@ test('bg', async () => {
         '-bg-conic-45/oklab',
         'bg-conic-45/shorter',
         'bg-conic-45/[in_hsl_longer_hue]',
+        'bg-radial/oklch',
+        'bg-radial/oklab',
+        'bg-radial/hsl',
+        'bg-radial/srgb',
+        'bg-radial/longer',
+        'bg-radial/shorter',
+        'bg-radial/increasing',
+        'bg-radial/decreasing',
+        'bg-radial/[in_hsl_longer_hue]',
+        'bg-radial-[circle_at_center]',
         // Invalid but proves not converted to `in oklch longer hue` when used
         // as an arbitrary value
         'bg-linear-to-r/[longer]',
@@ -10484,6 +10494,56 @@ test('bg', async () => {
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    .bg-radial-\\[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, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/decreasing {
+      --tw-gradient-position: in oklch decreasing hue, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/hsl {
+      --tw-gradient-position: in hsl, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/increasing {
+      --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, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/oklab {
+      --tw-gradient-position: in oklab, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/oklch {
+      --tw-gradient-position: in oklch, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/shorter {
+      --tw-gradient-position: in oklch shorter hue, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/srgb {
+      --tw-gradient-position: in srgb, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
     .bg-\\[image\\:var\\(--my-gradient\\)\\] {
       background-image: var(--my-gradient);
     }
@@ -10670,6 +10730,7 @@ test('bg', async () => {
       'bg-[image:var(--my-gradient)]/foo',
       'bg-linear-[to_bottom]/hsl',
       'bg-conic-[45deg]/hsl',
+      'bg-conic-[circle_at_center]/hsl',
       'bg-auto/foo',
       'bg-cover/foo',
       'bg-contain/foo',
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index ce19d6f58128..785b5ff6c119 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2279,6 +2279,17 @@ export function createUtilities(theme: Theme) {
       ])
     }
 
+    let suggestedModifiers = [
+      'oklab',
+      'oklch',
+      'srgb',
+      'hsl',
+      'longer',
+      'shorter',
+      'increasing',
+      'decreasing',
+    ]
+
     let linearGradientDirections = new Map([
       ['to-t', 'to top'],
       ['to-tr', 'to top right'],
@@ -2315,11 +2326,10 @@ export function createUtilities(theme: Theme) {
       return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
         if (!candidate.value) return
 
-        let value = candidate.value.value
-        let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
-
         if (candidate.value.kind === 'arbitrary') {
           if (candidate.modifier) return
+
+          let value = candidate.value.value
           let type = candidate.value.dataType ?? inferDataType(value, ['angle'])
 
           switch (type) {
@@ -2340,20 +2350,24 @@ export function createUtilities(theme: Theme) {
               ]
             }
           }
-        } else {
-          if (!negative && linearGradientDirections.has(value)) {
-            value = linearGradientDirections.get(value)!
-          } else if (isPositiveInteger(value)) {
-            value = negative ? `calc(${value}deg * -1)` : `${value}deg`
-          } else {
-            return
-          }
+        }
 
-          return [
-            decl('--tw-gradient-position', `${value} ${interpolationMethod},`),
-            decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
-          ]
+        let value = candidate.value.value
+
+        if (!negative && linearGradientDirections.has(value)) {
+          value = linearGradientDirections.get(value)!
+        } else if (isPositiveInteger(value)) {
+          value = negative ? `calc(${value}deg * -1)` : `${value}deg`
+        } else {
+          return
         }
+
+        let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
+
+        return [
+          decl('--tw-gradient-position', `${value} ${interpolationMethod},`),
+          decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
+        ]
       }
     }
 
@@ -2363,16 +2377,25 @@ export function createUtilities(theme: Theme) {
     suggest('bg-linear', () => [
       {
         values: [...linearGradientDirections.keys()],
+        modifiers: suggestedModifiers,
       },
       {
         values: ['0', '30', '60', '90', '120', '150', '180', '210', '240', '270', '300', '330'],
         supportsNegative: true,
+        modifiers: suggestedModifiers,
       },
     ])
 
     function handleBgConic({ negative }: { negative: boolean }) {
       return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
-        if (candidate.value?.kind === 'arbitrary' && candidate.modifier) return
+        if (candidate.value?.kind === 'arbitrary') {
+          if (candidate.modifier) return
+          let value = candidate.value.value
+          return [
+            decl('--tw-gradient-position', `${value},`),
+            decl('background-image', `conic-gradient(var(--tw-gradient-stops,${value}))`),
+          ]
+        }
 
         let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
 
@@ -2385,13 +2408,6 @@ export function createUtilities(theme: Theme) {
 
         let value = candidate.value.value
 
-        if (candidate.value.kind === 'arbitrary') {
-          return [
-            decl('--tw-gradient-position', `${value},`),
-            decl('background-image', `conic-gradient(var(--tw-gradient-stops,${value}))`),
-          ]
-        }
-
         if (!isPositiveInteger(value)) return
 
         value = negative ? `calc(${value} * -1)` : `${value}deg`
@@ -2409,32 +2425,41 @@ export function createUtilities(theme: Theme) {
     suggest('bg-conic', () => [
       {
         hasDefaultValue: true,
+        modifiers: suggestedModifiers,
       },
       {
         values: ['0', '30', '60', '90', '120', '150', '180', '210', '240', '270', '300', '330'],
         supportsNegative: true,
+        modifiers: suggestedModifiers,
       },
     ])
-  }
 
-  utilities.functional('bg-radial', (candidate) => {
-    if (candidate.modifier) return
+    utilities.functional('bg-radial', (candidate) => {
+      if (!candidate.value) {
+        let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
+        return [
+          decl('--tw-gradient-position', `${interpolationMethod},`),
+          decl('background-image', `radial-gradient(var(--tw-gradient-stops))`),
+        ]
+      }
 
-    if (!candidate.value) {
-      return [
-        decl('--tw-gradient-position', `in oklch,`),
-        decl('background-image', `radial-gradient(var(--tw-gradient-stops))`),
-      ]
-    }
+      if (candidate.value.kind === 'arbitrary') {
+        if (candidate.modifier) return
+        let value = candidate.value.value
+        return [
+          decl('--tw-gradient-position', `${value},`),
+          decl('background-image', `radial-gradient(var(--tw-gradient-stops,${value}))`),
+        ]
+      }
+    })
 
-    if (candidate.value.kind === 'arbitrary') {
-      let value = candidate.value.value
-      return [
-        decl('--tw-gradient-position', `${value},`),
-        decl('background-image', `radial-gradient(var(--tw-gradient-stops,${value}))`),
-      ]
-    }
-  })
+    suggest('bg-radial', () => [
+      {
+        hasDefaultValue: true,
+        modifiers: suggestedModifiers,
+      },
+    ])
+  }
 
   utilities.functional('bg', (candidate) => {
     if (!candidate.value) return

From 5c39f335fa2ee9672080794c3c8f75ce4352edcc Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Tue, 12 Nov 2024 20:43:59 -0500
Subject: [PATCH 7/7] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52cc9042cc3c..0c7eed39ce31 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Support opacity values in increments of `0.25` by default ([#14980](https://github.com/tailwindlabs/tailwindcss/pull/14980))
+- Support specifying the color interpolation method for gradients via modifier ([#14984](https://github.com/tailwindlabs/tailwindcss/pull/14984))
 
 ## [4.0.0-alpha.33] - 2024-11-11