Tailwind CSS IntelliSense and Twin

[ben-rogerson]

Good news, Brad has just pushed a new release that includes an experimental custom regex feature.

Installation

Install the extension in VSCode:

From your command palette select: "Preferences: Open Settings (JSON)" and add this to your settings:

"scss.validate": false,
"editor.quickSuggestions": {
    "strings": true
},
"editor.autoClosingQuotes": "always",
"tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)", // tw`...`
    "tw=\"([^\"]*)", // <div tw="..." />
    "tw={\"([^\"}]*)", // <div tw={"..."} />
    "tw\\.\\w+`([^`]*)", // tw.xxx`...`
    "tw\\(.*?\\)`([^`]*)" // tw(Component)`...`
],
"tailwindCSS.includeLanguages": {
  "typescript": "javascript",
  "typescriptreact": "javascript"
}

Note: If you use single quotes in your project then replace them in the regex sets above.

In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js or tailwind.js in your workspace.

You'll also need to install PostCSS in your project:

npm install -D postcss 
yarn add postcss -D

You'll then see class auto-completions from your merged tailwind.config

[matepaiva]

Is there anyway to show an error in vscode linter, as it already shows in the console and in the browser, when a wrong class is added to twin?

[ben-rogerson]

Unfortunately the vscode plugin has no way of knowing which suggestions twin is making.

[JimmyLv]

How about WebStorm?

[ben-rogerson]

There is no plugin for WebStorm - sorry!

[dmwyatt]

As a stupid workaround, I usually use className so that I can get completion for tailwind class names (since WS will pull those out of the css file) and then switch those over to tw.

I don't think it'd be difficult to write a plugin for Jetbrains IDEs, but I don't like writing Java or Kotlin and don't have the time right now anyway.

[SnowSuno]

It is now available by adding the config under Settings > Languages & Frameworks > Style Sheets > Tailwind CSS in versions after 2023.1. youtrack issue

[alanontheweb]

@ben-rogerson @lightyen is there any way for the vs-code-tailwind-twin intellisense to work with the babel-plugin-twin (https://github.com/ben-rogerson/babel-plugin-twin)?

It only seems to autocomplete classes when I manually import the macro.

Also for some reason, the classes don't have a green color when using <div tw="border-2 flex">test</div>

[ben-rogerson]

Lightyen has done some work here - have a read of this issue

[alanontheweb]

@ben-rogerson awesome, it works great!

[xlboy]

About the feature "Apply variants to multiple classes at once with variant groups"

How should it be configured to get a hint in VSCode - Tailwind CSS IntelliSense ?

[itorz7]

Is it possible to have it in webstorm ?? 👍

[ben-rogerson]

#227 (comment)

[b0o]

For Neovim support, I translated the recommended config to Lua for use with lspconfig:

require('lspconfig').tailwindcss.setup {
  settings = {
    scss = { validate = false },
    editor = {
      quickSuggestions = { strings = true },
      autoClosingQuotes = 'always',
    },
    tailwindCSS = {
      experimental = {
        classRegex = {
          'tw`([^`]*)', -- tw`...`
          'tw="([^"]*)', -- <div tw="..." />
          'tw={"([^"}]*)', -- <div tw={"..."} />
          'tw\\.\\w+`([^`]*)', -- tw.xxx`...`
          'tw\\(.*?\\)`([^`]*)', -- tw(Component)`...`
        },
      },
      includeLanguages = {
        typescript = 'javascript',
        typescriptreact = 'javascript',
      },
    },
  },
}

[massoudsalem]

When using this with groups, IntelliSense gives a wrong warning:

[john-twigg-ck]

The project

https://github.com/lightyen/vscode-tailwindcss-twin
us now archived and out of date.

the errors its producing are becuase the underlying types project is itself out of date:
https://github.com/lightyen/tailwind-types

BOO!