From ee77ab815bf7b2e558616cf52d5fd3fca0b2d2c8 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 7 Jul 2025 10:36:21 -0400
Subject: [PATCH 1/4] Ensure color swatches show in completions when using a
 prefix

---
 packages/tailwindcss-language-service/src/util/color.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/tailwindcss-language-service/src/util/color.ts b/packages/tailwindcss-language-service/src/util/color.ts
index 514fc286..073c96ed 100644
--- a/packages/tailwindcss-language-service/src/util/color.ts
+++ b/packages/tailwindcss-language-service/src/util/color.ts
@@ -216,6 +216,14 @@ export function getColor(state: State, className: string): culori.Color | Keywor
 
     let color = getColorFromRoot(state, css)
 
+    // TODO: Either all consumers of this API should assume there's no prefix
+    // or pass in correctly prefixed classes
+    if (state.designSystem.theme.prefix !== '' && !color) {
+      className = `${state.designSystem.theme.prefix}:${className}`
+      css = state.designSystem.compile([className])[0]
+      color = getColorFromRoot(state, css)
+    }
+
     return color
   }
 

From 686a14854a2b283be86e11cc45d8e72a373a945c Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 7 Jul 2025 10:39:08 -0400
Subject: [PATCH 2/4] Update changelog

---
 packages/vscode-tailwindcss/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md
index 3c830f22..bd87b48e 100644
--- a/packages/vscode-tailwindcss/CHANGELOG.md
+++ b/packages/vscode-tailwindcss/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## Prerelease
 
-- Nothing yet!
+- Ensure color swatches show up in completions when using a prefix in v4 ([#1422](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1422))
 
 ## 0.14.24
 

From 858c9b01409f82fc33efbe60829ff767696b3b21 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 7 Jul 2025 10:45:08 -0400
Subject: [PATCH 3/4] Add test

---
 .../tests/completions/completions.test.js     | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/packages/tailwindcss-language-server/tests/completions/completions.test.js b/packages/tailwindcss-language-server/tests/completions/completions.test.js
index 090ec872..8fb828cc 100644
--- a/packages/tailwindcss-language-server/tests/completions/completions.test.js
+++ b/packages/tailwindcss-language-server/tests/completions/completions.test.js
@@ -814,6 +814,39 @@ defineTest({
   },
 })
 
+defineTest({
+  name: 'v4: class completions show colors when using prefixes',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss' prefix(tw);
+    `,
+  },
+  prepare: async ({ root }) => ({ client: await createClient({ root }) }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      lang: 'html',
+      text: '<div class="tw:">',
+    })
+
+    // <div class="tw:">
+    //               ^
+    let completion = await document.completions({ line: 0, character: 15 })
+
+    expect(completion).toEqual({
+      isIncomplete: false,
+      items: expect.arrayContaining([
+        expect.objectContaining({
+          label: 'bg-black',
+
+          // And it's shown as a color
+          kind: CompletionItemKind.Color,
+          documentation: '#000000',
+        }),
+      ]),
+    })
+  },
+})
+
 defineTest({
   name: 'v4: Completions show inside class functions in JS/TS files',
   fs: {

From 3d4d850976d474a5193ae8ab35cca68a9778afec Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 7 Jul 2025 10:50:03 -0400
Subject: [PATCH 4/4] tweak

---
 packages/tailwindcss-language-service/src/util/color.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/tailwindcss-language-service/src/util/color.ts b/packages/tailwindcss-language-service/src/util/color.ts
index 073c96ed..1032a1dd 100644
--- a/packages/tailwindcss-language-service/src/util/color.ts
+++ b/packages/tailwindcss-language-service/src/util/color.ts
@@ -216,10 +216,12 @@ export function getColor(state: State, className: string): culori.Color | Keywor
 
     let color = getColorFromRoot(state, css)
 
+    let prefix = state.designSystem.theme.prefix ?? ''
+
     // TODO: Either all consumers of this API should assume there's no prefix
     // or pass in correctly prefixed classes
-    if (state.designSystem.theme.prefix !== '' && !color) {
-      className = `${state.designSystem.theme.prefix}:${className}`
+    if (prefix && !color && !className.startsWith(prefix + ':')) {
+      className = `${prefix}:${className}`
       css = state.designSystem.compile([className])[0]
       color = getColorFromRoot(state, css)
     }