vscode-cssvar
vscode-cssvar copied to clipboard
[Feat] Add Tailwind CSS Variable Syntax Support for Intellisense
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:
- Recognizes the Tailwind arbitrary value syntax pattern (
property-[specificPart:var(--name)]for shorthands andproperty-[var(--name)]for simple properties) - 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.