Negative impact of including static declarations in custom variants

[functasti]

What version of VS Code are you using?

v1.99.3

What version of Tailwind CSS IntelliSense are you using?

v0.14.16

What version of Tailwind CSS are you using?

4.1.3

What package manager are you using?

npm

What operating system are you using?

Ubuntu Linux

Tailwind config

Default

Describe your issue

1. Including static declarations in custom variants disrupts the VS Code intellisense suggestions, pushing utility information out of view.

Example:

@custom-variant range-thumb {
  &::-webkit-slider-thumb {
    appearance: none;
    cursor: grab; 
    @slot;
  }
  &::-moz-range-thumb {
    @slot;
  }
}

When using utilities like range-thumb:w-* or range-thumb:h-*, instead of displaying px or rem values for each step, the suggestions will prioritize the static declarations appearance: none; cursor: grab;. This obscures the actual utility values.

2. VS Code inline color preview functionality stops working for color related utility classes.

Example:

range-thumb:bg-blue-600

Instead of displaying the usual color preview (a blue square), the preview does not render at all.

[thecrypticace]

oooh… makes sense why we display it this way but definitely feels unexpected from a user standpoint. Lemme think through this one some

[functasti]

Thanks for the quick fix!

[thecrypticace]

I'm aiming to get a release out this week with this fix.