⚠️ Windi CSS is Sunsetting ⚠️
We are sunsetting Windi CSS and we recommend new projects to seek for alternatives. Read the full blog post.

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

By default VS Code will not trigger completions when editing "string" content. Updating the editor.quickSuggestions setting may improve your experience:

"editor.quickSuggestions": {
  "strings": true
}

Vscode css validation may display errors when using windi syntax, such as @apply. You can disable this with the `css.validate setting:

"css.validate": false

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.

disabled by default, activate with "windicss.enableCodeFolding"

Fold overly long classes to increase readability.

Built-in commands, one-key operation.

Browse your utilities usages, have an overview of your design system, identify "bad practices", and more!

Give an example of windicss.includeLanguages

"windicss.includeLanguages": {
  "abc": "html", // css, js
  "def": {
    "type": "css"
  },
  "ghi": {
    "type": "js",
    "patterns": ["@apply\s+\S+$", "..." ],
  },
}

• Windi CSS
• Documentation
• Discussions
• Issues