vscode-xwind

Adds editor support for xwind tagged template syntax: tw`...` or xw`...`

This extension extends VS Code's typescript language service with typescript-xwind-plugin. Make sure you're using VS Code's typescript version for the extension to work! If you want to have editor support with your projects typescript version or use a different editor check out typescript-xwind-plugin's documentation for install instructions.

It also works with other solutions that use the tw tagged template but issues specific to those might not be solved.

Features

• Autocomplete for all tailwind classes and variants and xwind custom array syntax
• CSS preview on hover and completion details
• Errors for classes that don't exist
• Automatically finds your projects tailwind.config.js
• React to changes made in tailwind.config.js
• No generated CSS file
• No class mismatch it uses your project's installed version of tailwind

Installation

Go to VS Code extensions marketplace

Demo

Autocomplete

CSS hover preview

Errors

Reacting to tailwind.config.js changes

Configuration

"xwind.useCompletionItemProviderTriggerProxy": {
  "type": "boolean",
  "default": true,
  "description": "use Trigger character completion proxy."
},
"xwind.ignoreErrors": {
  "type": [
    "string",
    "null"
  ],
  "default": null,
  "description": "If this regex pattern string matches the error will be ignored"
}