Tailwind intellisense/auto-complete support #124

CurralesDragon · 2021-11-04T11:13:55Z

CurralesDragon
Nov 4, 2021

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 · 2021-11-04T22:39:53Z

jaredh159
Nov 4, 2021
Maintainer

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?

3 replies

sunil04ce Mar 19, 2024

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 Apr 3, 2024

This works!

bhadri2002 Apr 16, 2024

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

axeldelafosse · 2021-11-05T12:37:58Z

axeldelafosse
Nov 5, 2021

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>
  );
}

1 reply

aun-shahbaz-awan Nov 8, 2023

This works!

rickyalmeidadev · 2021-11-11T16:59:08Z

rickyalmeidadev
Nov 11, 2021

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.

0 replies

CurralesDragon · 2021-11-11T23:19:58Z

CurralesDragon
Nov 11, 2021
Author

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.

0 replies

kuk941025 · 2021-11-13T00:45:41Z

kuk941025
Nov 13, 2021

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

1 reply

shivang-tripati Oct 13, 2023

npx tailwindcss init also worked for me

Pedromdsn · 2021-11-13T23:25:18Z

Pedromdsn
Nov 13, 2021

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.

0 replies

ahmed-rezk-dev · 2021-11-17T18:33:53Z

ahmed-rezk-dev
Nov 17, 2021

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

0 replies

arnabtarwani · 2021-12-03T16:35:54Z

arnabtarwani
Dec 3, 2021

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

3 replies

abhay-rana Jul 30, 2022

perfect answer

AnatuGreen Oct 6, 2022

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

MichaelYuhe Oct 12, 2022

Exactly

henrychea · 2022-07-19T18:32:44Z

henrychea
Jul 19, 2022

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('...')
  },
},

0 replies

lanxuexing · 2022-08-05T09:39:56Z

lanxuexing
Aug 5, 2022

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>

0 replies

Seanmclem · 2023-07-28T17:01:10Z

Seanmclem
Jul 28, 2023

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.

0 replies

snsnf · 2023-09-20T05:53:59Z

snsnf
Sep 20, 2023

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\\(([^)]*)\\)", "'([^']*)'"]
]

0 replies

garygcchiu · 2023-11-11T03:26:58Z

garygcchiu
Nov 11, 2023

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

1 reply

PopBot Nov 14, 2023

I was just about to ask this as well!

max-arias · 2024-02-02T16:13:02Z

max-arias
Feb 2, 2024

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.

0 replies

yangfei4913438 · 2024-03-13T13:57:42Z

yangfei4913438
Mar 13, 2024

webstorm configuration, I hope to help you

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

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

1 reply

PopBot Mar 18, 2024

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tailwind intellisense/auto-complete support #124

{{title}}

Replies: 15 comments 10 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Tailwind intellisense/auto-complete support #124

Replies: 15 comments · 10 replies

jaredh159 Nov 4, 2021 Maintainer

CurralesDragon Nov 11, 2021 Author

For those who want a quick copy and paste

1. Tailwind CSS > Experimental: Class Regex

2. VSCode typescriptreact snippets

3. Working

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)

Replies: 15 comments 10 replies

jaredh159
Nov 4, 2021
Maintainer

CurralesDragon
Nov 11, 2021
Author

🗃️ 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)`