Tailwind intellisense/auto-complete support

[nicholaswhittle]

I'm trying to figure out the correct regex to use for intellisense support. Similar to tailwind-rn

vadimdemedes/tailwind-rn@2f848b6

What is the full regex pattern for tailwind-react-native-classnames to use with tailwindCSS.experimental.classRegex config?

[jaredh159]

I don't know honestly, but it shouldn't be too hard to come up with some regexes that work, for instance (not tested)

"tailwindCSS.experimental.classRegex": [
  "tw`([^`]*)",
  "tw\\.style\\(([^)]*)\\)",
]

etc... if you get it working, can you report back what you used?

[sunil04ce]

It's working for me too.
It gives nice suggestions as given in attached image.

I have following in Tailwind CSS IntelliSense extension's settings.json

"tailwindCSS.classAttributes": ["class", "className", "ngClass", "style"],
  "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)",
    ["tw.style\\(([^)]*)\\)", "'([^']*)'"]
  ]

also I have tailwind.config.js below package.json with following code:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

If I remove tailwind.config.js at that time it stopped working,
I guess tailwind.config.js is required in my case.

Does any body have same ?

[lixianglin2018]

This works!

[bhadri01]

tailwind.config.js is mandatory and it's works!!

[Mng12345]

The tailwind.config.js must be existed.

[axeldelafosse]

I'm solving this by creating my own design system (View, Text and more) where the components are taking a tw prop.

Then you can add tw to Tailwind CSS: Class Attributes VS Code extension setting to get IntelliSense working!

For example:

import { View, Text } from 'app/design-system';

export function HelloWorld() {
  return (
    <View tw="flex-1 justify-center items-center bg-white dark:bg-black">
      <Text tw="text-black dark:text-white">
        Hello, World!
      </Text>
    </View>
  );
}

[aun-shahbaz-awan]

This works!

[rickyalmeidadev]

I don't know honestly, but it shouldn't be too hard to come up with some regexes that work, for instance (not tested)

"tailwindCSS.experimental.classRegex": [
  "tw`([^`]*)",
  "tw\\.style\\(([^)]*)\\)",
]

etc... if you get it working, can you report back what you used?

I've been using it for a few weeks and it's been working perfectly.

[nicholaswhittle]

Great, my use case is getting it to work with emacs which isn't working with the same regex expression. When i figure it out il post it here.

[jaykay-p]

@nicwhitts
I ran into the same problem. I added classRegex in settings.json, but inteliisense didnt work.

I got it working after installing tailwindcss and postcss 8 dependencies.
Also, ran npx tailwindcss init command to create default tailwind.config.js in the root.

[shivang-tripati]

npx tailwindcss init also worked for me

[Pedromdsn]

Estou resolvendo isso criando meu próprio sistema de design ( View, Texte mais), onde os componentes estão tomando uma twprop.

Então você pode adicionar twa Tailwind CSS: Class Attributesconfiguração de extensão do VS Code para fazer o IntelliSense funcionar!

Por exemplo:

import { View, Text } from 'app/design-system';

export function HelloWorld() {
  return (
    <View tw="flex-1 justify-center items-center bg-white dark:bg-black">
      <Text tw="text-black dark:text-white">
        Hello, World!
      </Text>
    </View>
  );
}

Great, the other alternatives don't work for me and that was going to be 10/10 to dispense with the workarounds.

[ahmed-rezk-dev]

I was looking to do the same. I found this solution. I use Neovim and it works great.

For VScode:

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

For Neovim LSP:

require"lspconfig".tailwindcss.setup {
  settings = {
    tailwindCSS = {
      experimental = {
        classRegex = {
          "tw`([^`]*)", -- tw`...`
          "tw=\"([^\"]*)", -- <div tw="..." />
          "tw={\"([^\"}]*)", -- <div tw={"..."} />
          "tw\\.\\w+`([^`]*)", -- tw.xxx`...`
          "tw\\(.*?\\)`([^`]*)"
        }
      }
    }
  }
}

Source: https://githubmemory.com/repo/kabouzeid/nvim-lspinstall/issues/45

[arnabtarwani]

You could also add style in the extensions under TailwindCSS extension Tailwind CSS IntelliSense in VS Code Settings (UI)

[abhay-rana]

perfect answer

[AnatuGreen]

If after you add this you still don't get autocomplete, follow this guide I wrote here on StackOverflow

[MichaelYuhe]

Exactly

[henrychea]

This is what I am using for both VS Code and Neovim LSP with a colorizer plugin but the regex for tw.style() and tw.color() is wonky. If you write tw.color('bg-white') it will not highlight but if you add spaces and write tw.color(' bg-white ') then you will get colorizer highlight (this is true in both VS Code and Neovim). So if someone can fix my regex for tw.xxx(...) then we will have complete highlighting lol

experimental = {
	classRegex = {
	    "tw`([^`]*)", -- tw`...` 
	    "tw=\"([^\"]*)", -- <div tw="..." />
	    "tw={\"([^\"}]*)", -- <div tw={"..."} />
	    "tw\\.\\w+`([^`]*)", -- tw.xxx`...`
	    "tw\\(.*?\\)`([^`]*)", -- tw(Component)`...` 
	    "tw\\.\\w+\\(([^)]*)\\)" -- tw.xxx('...')
  },
},

[lanxuexing]

For those who want a quick copy and paste

1. Tailwind CSS > Experimental: Class Regex

"tailwindCSS.experimental.classRegex": [
  "tw`([^`]*)",
  ["tw.style\\(([^)]*)\\)", "'([^']*)'"]
]

2. VSCode typescriptreact snippets

"Tailwind React Native Class": {
  "prefix": "rnClass",
  "body": [
    "style={tw`$1`}"
  ],
  "description": "Tailwind React Native Class"
},
"Tailwind React Native ClassNames": {
  "prefix": "rnClassNames",
  "body": [
    "style={tw.style('$1')}"
  ],
  "description": "Tailwind React Native ClassNames"
}

3. Working

• demo

• code

<!-- rnClass -->
<View style={tw``}></View>
<!-- rnClassNames -->
<View style={tw.style('')}></View>

[Seanmclem]

I added that to my settings.json, and have the extension installed, and restarted vs code. It doesn't work.

Seems like maybe other extensions are interfering maybe, hard to tell. I don't have many extensions anyway.

---

[snsnf]

Steps to config twrnc with official Tailwind plugin:

🗃️ Create tailwind.config.{js,cjs,mjs,ts} file on the root path. (most people forget to do this)

➕ Add the following to the VSCode settings (settings.json)

 "tailwindCSS.classAttributes": [
    "style"
],
"tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)",
    ["tw.style\\(([^)]*)\\)", "'([^']*)'"]
]

[garygcchiu]

Has anyone found a way to enable the autocompletion for JetBrains IDEs?

[PopBot]

I was just about to ask this as well!

[max-arias]

Another tip! Run Tailwind CSS: show output to see if Tailwind is complaining about something.

I had an invalid import that was crashing the plugin but there were no errors until I looked at those logs.

[yangfei4913438]

webstorm configuration, I hope to help you

1. Check the version. Available for WebStorm 2023.1(opens in a new tab) and later
2. Open the settings. Go to Languages and Frameworks | Style Sheets | Tailwind CSS
3. Add the following to your tailwind configuration

 "experimental": {
    "configFile": null,
    "classRegex": [
      "tw\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"
    ]
  }

[PopBot]

Wow, thank you so much @yangfei4913438 ! That fix works incredibly well!

[gixxy22]

thanks @yangfei4913438 ! had to invalidates caches and restart, but works perfectly!!

[stesvis]

I have all the correct config listed above, and yet (in react native):

[vayospot]

So the way i got mine to work was to add this line to my settings.json:
"tailwindCSS.experimental.configFile": "./tailwind.config.js"

This is to explicitly tell the extension where my tailwind config file is which I don't know why but it was what eventually worked
Use the correct path where your .tailwind.config.js file is located, but most times, it should be in the root

So the full code I added to my settings.json file is:

"tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    "class:list",
    "style"
  ],
  "tailwindCSS.classFunctions": ["tw", "tw.color", "tw.style"],
  "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)",
    ["tw.style\\(([^)]*)\\)", "'([^']*)'"]
  ],
 "tailwindCSS.experimental.configFile": "./tailwind.config.js",

I hope it helps...