Skip to content

Arthie/vscode-xwind

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Nov 25, 2020
510ee5a · Nov 25, 2020

History

26 Commits
May 17, 2020
Nov 17, 2020
Nov 17, 2020
May 17, 2020
May 23, 2020
Nov 24, 2020
May 17, 2020
Nov 25, 2020
May 21, 2020
Nov 24, 2020
Nov 24, 2020
May 17, 2020
May 23, 2020
Aug 17, 2020
Aug 18, 2020
Sep 9, 2020
Sep 9, 2020
Nov 17, 2020
Nov 24, 2020

Repository files navigation

xwind

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

autocomplete

CSS hover preview

hover

Errors

error

Reacting to tailwind.config.js changes

react

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"
}

Releases

No releases published

Packages

No packages published