[IntelliSense] Add support for HSL color preview

[mattiaz9]

It would be nice to have color preview when setting hsl colors. I think it would be possible if the css variables are set inside a @layer scope.

Example:

tailwind.config.js

extend: {
  colors: {
    ...
    primary: "hsl(var(--primary))",
    ...
  }
}

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    --primary: 222.2 47.4% 11.2%;
}

[sipkoepp]

Everyone who uses shadcn/ui would love this!

[brittneypostma]

I think this should more generally work for any CSS variable with intellisense properly, not just a particular value. This is something that is needed and I’m sure it is doable. I’m going to put an issue in an the repo.

Update: or not…I see you have to start a discussion for a new feature, which is probably what this thread was for to begin with. In that case, as stated before, I think this feature should be implemented to work for all CSS Variables.