Color Decorators not showing on VSCode when theme uses a CSS variable

[saitobp]

What version of VS Code are you using?

1.101.0 (Universal)

What version of Tailwind CSS IntelliSense are you using?

0.14.22

What version of Tailwind CSS are you using?

4.1.10

What package manager are you using?

npm

What operating system are you using?

macOS

Tailwind CSS Stylesheet (v4) or config file (v3)

@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

@theme {
  --color-primary: oklch(70.7% 0.165 254.624);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-text: var(--foreground);
}

:root {
  --primary: oklch(70.7% 0.165 254.624);

  --radius: 0.625rem;
  --background: rgb(255, 255, 255);
  --foreground: rgb(37, 37, 37);
  --card: rgb(255, 255, 255);
  --card-foreground: rgb(37, 37, 37);
  --popover: rgb(255, 255, 255);
  --popover-foreground: rgb(37, 37, 37);
  --primary-foreground: rgb(251, 251, 251);
  --secondary: rgb(247, 247, 247);
  --secondary-foreground: rgb(52, 52, 52);
  --muted: rgb(247, 247, 247);
  --muted-foreground: rgb(142, 142, 142);
  --accent: rgb(247, 247, 247);
  --accent-foreground: rgb(52, 52, 52);
  --destructive: rgb(202, 73, 40);
  --border: rgb(235, 235, 235);
  --input: rgb(235, 235, 235);
  --ring: rgb(181, 181, 181);
  --chart-1: rgb(207, 122, 54);
  --chart-2: rgb(114, 167, 174);
  --chart-3: rgb(84, 96, 124);
  --chart-4: rgb(230, 186, 89);
  --chart-5: rgb(227, 160, 93);
  --sidebar: rgb(251, 251, 251);
  --sidebar-foreground: rgb(37, 37, 37);
  --sidebar-primary: rgb(52, 52, 52);
  --sidebar-primary-foreground: rgb(251, 251, 251);
  --sidebar-accent: rgb(247, 247, 247);
  --sidebar-accent-foreground: rgb(52, 52, 52);
  --sidebar-border: rgb(235, 235, 235);
  --sidebar-ring: rgb(181, 181, 181);
}

.dark {
  --primary: oklch(70.7% 0.165 254.624);

  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

VS Code settings

{
  "tailwindCSS.experimental.classRegex": [
    [
      "cva\\(([^)]*)\\)",
      "[\"'`]([^\"'`]*).*?[\"'`]"
    ],
    [
      "cx\\(([^)]*)\\)",
      "(?:'|\"|`)([^']*)(?:'|\"|`)"
    ],
    [
      "cn\\(([^)]*)\\)",
      "(?:'|\"|`)([^']*)(?:'|\"|`)"
    ]
  ],
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
  },
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass"
  ],
  "tailwindCSS.classFunctions": [
    "clsx"
  ],
  "css.validate": false,
  "tailwindCSS.validate": true,
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

Reproduction URL

https://github.com/saitobp/tailwind-intelisense-bug

on the layout.tsx file I've added two h1 tags, one using the custom css variable

Describe your issue

I've a global.css file with some css variables being defined, example: --primary: oklch(70.7% 0.165 254.624); and inside the @theme I add a --color-primary: var(--primary); variable, the value is being passed correctly, on the webpage the color is being applied, but the color decorator on VS code is not showing the color

If set the --color-primary: oklch(70.7% 0.165 254.624); it shows up, so I guess the issue is that the intelisense is not reading the color from the root. I'm not sure if this could be a config that I'm missing, I've added the recomended settings on the intelisense page and still nothing

[thecrypticace]

For now, this is expected. Neither IntelliSense nor Tailwind CSS itself "read" the contents of :root { … } for the purposes of looking up theme values (because they don't belong to the "theme" as Tailwind CSS sees it).

[andi23rosca]

@thecrypticace what about some magic comments on top of the color declarations that the extension can parse?
I really miss having the color swatches, makes finding classes at a glance super easy

Something like:

/* @static {rgb(37, 37, 37)} /*
  --color-foreground: var(--foreground);

or whatever syntax makes sense

If it'll be considered/accepted I could come back with a PR

[thecrypticace]

@andi23rosca I think it might be more useful / expected for IntelliSense to parse things found inside :root rather than searching for magic comments. This is something I want to do I just haven't taken the time to set it up yet.

[andi23rosca]

Nice, I agree, I misunderstood that it wasn't planned to do that at all 👍🏻

I can still try to get a PR in. Would love it if you could point me in the right direction in the source code if you feel like it