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: '
',
+ })
+
+ //
+ // ^
+ 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: {
diff --git a/packages/tailwindcss-language-service/src/util/color.ts b/packages/tailwindcss-language-service/src/util/color.ts
index 514fc286..1032a1dd 100644
--- a/packages/tailwindcss-language-service/src/util/color.ts
+++ b/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
}
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