vscode-cssvar icon indicating copy to clipboard operation
vscode-cssvar copied to clipboard

[Feat] Add Tailwind CSS Variable Syntax Support for Intellisense

Open NazCodeland opened this issue 1 year ago • 2 comments

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.

NazCodeland avatar Nov 05 '24 04:11 NazCodeland