color preview is not rendered

[mgenov]

The color preview is not rendered and only values are shown when variable is hovered.

Hover in tailwind.config.js

Hover in index.css

VSCode version details.

Version: 1.80.0 (Universal)
Commit: 660393deaaa6d1996740ff4880f1bad43768c814
Date: 2023-07-04T13:39:33.766Z
Electron: 22.3.14
ElectronBuildId: 21893604
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Darwin arm64 22.5.0

[percy507]

Same here.

Version: 1.78.2
Commit: b3e4e68a0bc097f0ae7907b217c1119af9e03435
Date: 2023-05-10T15:00:40.428Z
Electron: 22.5.2
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Darwin arm64 22.3.0
Sandboxed: No

[Ganbin]

This is because in tailwind css, when using css variables, we should not use the color space function:

Don’t include the color space function or opacity modifiers won’t work

It would be nice for the extension to handle this situation but I understand that it can be challenging to guess what function should be used.