Ensure color swatches show in completions when using a prefix

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: {

packages/tailwindcss-language-service/src/util/color.ts

@@ -216,6 +216,16 @@ 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 (prefix && !color && !className.startsWith(prefix + ':')) {
+      className = `${prefix}:${className}`
+      css = state.designSystem.compile([className])[0]
+      color = getColorFromRoot(state, css)
+    }
+
     return color
   }
 

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