Custom tailwind variables should show first in suggestions

[rbenzazon]

I would love to have a setting to make the custom tailwind token/variable placed on top in the suggestions, I installed this mainly for that and I see my custom variable at the end of a extremely long suggestion list, containing even arbitrary values, custom variables applied to the context (--spacing for sizes, --font for font, --color for colors) should be shown first because they are the current design system tokens.
Another annoyance is that there is only one keyword for distance variables but size, spacing and padding would be 3 different ones, so when typing p-, only the padding tokens would show up, w- would show sizes, m- or gap- would show spacing, you get the idea.
the value preview (distances, colors) should show up in the code even when using custom variables

[Macho006]

This is a great suggestion! Sorting custom tokens at the top of the autocomplete list would significantly improve the Developer Experience (DX), especially for projects with a strict design system.

Regarding your point on variable context:
Currently, Tailwind's IntelliSense filters based on the utility prefix (like p-, m-, etc.). To make your custom variables appear correctly for these prefixes, ensure they are defined under the specific keys in your tailwind.config.js rather than just global CSS. For example:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        "brand-gap": "var(--brand-spacing)",
      },
      colors: {
        "brand-primary": "var(--brand-color)",
      },
    },
  },
};

If you use the var() syntax inside the config as shown above, the VS Code extension usually tries to resolve the value. However, a dedicated setting to prioritize these tokens in the suggestion list would be a game-changer.

I hope the maintainers consider this as a feature request for the Tailwind CSS IntelliSense extension!