Tailwind intellisense support

[CurralesDragon]

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?

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

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

[CurralesDragon]

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.

[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)