[Feat] Add Tailwind CSS Variable Syntax Support for Intellisense

[NazCodeland]

Is your feature request related to a problem? Please describe. Currently, there's no intellisense support when using CSS variables with Tailwind's arbitrary value syntax in HTML:

<!-- Shorthand properties need the specific part -->
<div class="bg-[color:var(--custom-bg)] border-[color:var(--custom-border)]">

<!-- Simple/single properties don't need it -->
<div class="color-[var(--custom-color)] width-[var(--custom-width)]">

Describe the solution you'd like Add intellisense support that:

1. Recognizes the Tailwind arbitrary value syntax pattern (property-[specificPart:var(--name)] for shorthands and property-[var(--name)] for simple properties)
2. Triggers variable suggestions after typing var(-- within these patterns

Describe alternatives you've considered

• Using traditional CSS classes
• Creating separate utility classes
• Using inline styles

Additional context I am aware we can extend Tailwind config, but due to my environment, Figma plugin development, has constraints where you cannot import any local files into the main ui.html file. Therefore, even extending the Tailwind config doesn't work. The solution would be to use a bundler so that at build time I can add a local CSS file into the ui.html file.

Thank you for such an amazing extension.

[MiguelDebruyne]

If I may ask this here since it's related, how does one get this extension to work with Tailwind syntax .css files? The docs state that you need postcss installed in your node_modules with a corresponding postcss syntax parser. Tailwind does not have one under the postcss umbrella, it is a separate package. I tried putting this into VSC settings but to no avail.

"cssvar.postcssSyntax": {
    // [npm package name]: ["file extension list to use this syntax parser for"]
    "tailwindcss": ["css"]
  }

[phoenisx]

TailwindCSS is not a PostCSS supported syntax. You can use TailwindCSS PostCSS plugin to provide autocompletion for TailwindCSS variables, but I've never tried that plugin with this extension so I'm not sure if it will work or not. (My bad, the example I shared below show how to use TailwindCSS plugin.

Ref: https://github.com/willofindie/vscode-cssvar/blob/b62520219afcccbe66f8c6cacaa6ea24112ff9d4/src/parser.ts#L67-L75

{
  "cssvar.postcssPlugins": [
    ["tailwindcss", {}]
  ]
}

Example config with plugins