editors/vscode.md
Windi CSS IntelliSense enhances the Windi development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, code folding, and building.
Install via the Visual Studio Code Marketplace →
Install via the Open VSX Registry →
This plugin packs a windicss compiler, so you can use it without installing windicss, and it also supports the configuration file (tailwind|windi).config.(js|cjs|ts).
Intelligent suggestions for utilities and variants.
See the complete CSS for a class name by hovering over it.
Highlight utilities, variants and importants.
Preview color and spectrum.
Fold overly long classes to increase readability.
Built-in commands, one-key operation.
| Settings | type | default | description |
|---|---|---|---|
windicss.enableColorDecorators | boolean | true | Enable Color Decorators. |
windicss.enableHoverPreview | boolean | true | Enable hover className to show preview of CSS. |
windicss.enableCodeCompletion | boolean | true | Enable/Disable all code completions. |
windicss.enableUtilityCompletion | boolean | true | Enable Utility Completion. |
windicss.enableVariantCompletion | boolean | true | Enable Variant Completion. |
windicss.enableDynamicCompletion | boolean | true | Enable Dynamic Utilities Completion like p-${int}. |
windicss.enableRemToPxPreview | boolean | true | Enable Rem to Px Preview. |
windicss.enableCodeFolding | boolean | true | Enable ClassNames Code Folding. |
windicss.foldByLength | boolean | false | Folding code by length. Default option is false, will fold by utility count. |
windicss.foldCount | number | 3 | Used by foldByCount. |
windicss.foldLength | number | 25 | Used by foldByLength |
windicss.hiddenText | string | ... | Placeholder used when folding code. |
windicss.hiddenTextColor | string | #AED0A4 | Placeholder Color. |
windicss.sortOnSave | boolean | false | Runs class sorting on file save. |