Description
What version of VS Code are you using?
v1.99.3
What version of Tailwind CSS IntelliSense are you using?
v0.14.15
What version of Tailwind CSS are you using?
v4.1.4
What package manager are you using?
npm
What operating system are you using?
macOS
Tailwind config
@import 'tailwindcss';
:root {
--one: #ff0000;
--two: 255 00 00;
--color-three: #ff0000;
--color-four: 255 00 00;
}
@theme inline {
/* Not self-referencing, not using rgb() ✅ */
--color-one: var(--one);
/* Not self-referencing, using rgb() ✅ */
--color-two: rgb(var(--two));
/* Self-referencing, not using rgb() ✅ */
--color-three: var(--color-three);
/* Self-referencing, using rgb() ❌ */
/* This silently fails and breaks all IntelliSense. */
--color-three: rgb(var(--color-three));
/* Comment 👆 out and Reload VS Code to get IntelliSense working again */
}VS Code settings
// Paste your VS Code settings in JSON format hereReproduction URL
This is the bare-bones project created by create-next-app but with globals.css edited to show issue:
https://github.com/zsidnam/tailwind-css-intellisense-issue/blob/main/app/globals.css
Describe your issue
IntelliSense is silently failing when I use Tailwind v4 and define a theme color var that references itself inside the rgb() function. While there is no reason to intentionally do this, this happened on a real project after upgrading from Tailwind v3 to v4 using the official codemod. I had coincidentally been using the "--color-*" prefix for my color variables and had been following the Tailwind v3 recommendation of defining the theme color vars as color channels see here, and the codemod essentially resulted in this:
BEFORE CODEMOD:
/* theme.css */
:root {
--color-background: 00 00 00;
}// tailwind.config.ts
const config: Config = {
theme: {
extend: {
colors: {
background: 'rgb(var(--color-background))'
}
}
}
}AFTER CODEMOD:
/* theme.css */
:root {
--color-background: 00 00 00;
}/* main.css */
@theme inline {
--color-background: rgb(var(--color-background))
}This broke all tailwind IntelliSense and took me a long time to find 😞 I didn't see any errors in the "Tailwind CSS: Show Output" logs. If this should be supported, can we fix it? And if not, can we log an error when this happens so it is easier to track down?