In my current project using Tailwind CSS with CSS variables for styling, I have noticed a peculiar issue. The color previewers/decorators that usually appear when defining a color are not showing up in my class names. These previewers are quite helpful in visualizing which color is being applied.
Interestingly, this feature works perfectly fine when utilizing default Tailwind colors like text-red-500, or even for custom values such as text-[red]. However, when I use a color defined as a CSS variable, the color box fails to display, although the CSS gets applied without any issues. Refer to the code snippets and images provided below for a clearer understanding.
Code from the global.css file:
:root{
--background: 222.2 84% 4.9%;
}
Code from the tailwind.config.js file:
theme: {
extend: {
colors: {
background: 'hsl(var(--background))'
}
}
}
In the screenshot attached below, you can observe that IntelliSense works correctly for standard Tailwind colors but does not show the decorator for colors defined using CSS variables.
https://i.sstatic.net/9ULwo.png
I attempted using hex colors instead of hsl, but encountered the same issue. My Tailwind and Tailwind IntelliSense extensions are up to date. While I explored some GitHub issues related to this topic, none seemed to address my specific situation where the extension works for regular colors but not for those defined with CSS variables. Is there a solution to resolve this discrepancy?