Windi CSS Intellisense for VS Code

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.

Installation

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).

Features

Autocomplete

Intelligent suggestions for utilities and variants.

Auto Complete

Hover Preview

See the complete CSS for a class name by hovering over it.

Hover Preview

Syntax Highlighting

Highlight utilities, variants and importants.

Syntax Highlighting

Color Preview

Preview color and spectrum.

Color Preview

Code Folding

Fold overly long classes to increase readability.

Code Folding

Compile Commands

Built-in commands, one-key operation.

Compile Commands

Extension Settings

Settingstypedefaultdescription
windicss.enableColorDecoratorsbooleantrueEnable Color Decorators.
windicss.enableHoverPreviewbooleantrueEnable hover className to show preview of CSS.
windicss.enableCodeCompletionbooleantrueEnable/Disable all code completions.
windicss.enableUtilityCompletionbooleantrueEnable Utility Completion.
windicss.enableVariantCompletionbooleantrueEnable Variant Completion.
windicss.enableDynamicCompletionbooleantrueEnable Dynamic Utilities Completion like p-${int}.
windicss.enableRemToPxPreviewbooleantrueEnable Rem to Px Preview.
windicss.enableCodeFoldingbooleantrueEnable ClassNames Code Folding.
windicss.foldByLengthbooleanfalseFolding code by length. Default option is false, will fold by utility count.
windicss.foldCountnumber3Used by foldByCount.
windicss.foldLengthnumber25Used by foldByLength
windicss.hiddenTextstring ...Placeholder used when folding code.
windicss.hiddenTextColorstring#AED0A4Placeholder Color.
windicss.sortOnSavebooleanfalseRuns class sorting on file save.

For more information