Auto Complete suggestion not working for text color when custom @utility text-* is defined #1447
Description
What version of VS Code are you using?
1.103.2
What version of Tailwind CSS IntelliSense are you using?
0.14.26 (LTS)
What version of Tailwind CSS are you using?
V4
What package manager are you using?
npm
What operating system are you using?
Windows
Tailwind CSS Stylesheet (v4) or config file (v3)
@import 'tailwindcss';
:root {
--font-scale: 1;
}
@theme inline {
/* --color-*: initial; */
--color-red: red;
--color-blue: blue;
}
/* Utility for dynamic font scaling based on --font-scale */
@utility text-* {
font-size: calc(--value(--text-*, [length]) * (1 + var(--font-scale, 0)));
}VS Code settings
Config File is being detected and other suggesion working fine. So, not the issue with that.
Reproduction URL
-- Let me know if the description dosen't help.. 😅
Describe your issue
When defining a custom @utility text-* directive in Tailwind CSS v4, the IntelliSense extension stops showing autocomplete suggestions for text color utilities (e.g., text-red, text-blue). Other utilities such as text-shadow-* or bg-* are working fine.
This appears to be caused by the custom @utility text-* directive conflicting with text color utilities.
Though, Once I type the class name manualy e.g. text-blue-100, then it is correctly displaying color swatch and the hover suggestions.
PS: If I'm doing it incorrectly and there's a better way to achieve dynamic font scaling in v4 that doesn't conflict with IntelliSense, please let me know. I have one solution btw, which is to use text-size-* arbitrary values, but if possible, I want to do that with direct text-* values directly.