Custom class name completion contexts

[bradlc]

There has been quite a few requests for the extension to support class name completions in contexts other than a standard class(Name) attribute.

Some examples:

• tailwind.macro and twin.macro (Add scrolling-touch/auto docs #46, Support for tailwind.macro in styled/emotion like tw... or tw.div... tailwindcss-intellisense#123):

  tw`_`
  tw.div`_`
  <Component tw="_" />
  

• tailwind-rn (Add @important at-rule #99):

  tailwind('_')
  

• tailwind-ppx (Algolia's DocSearch ready! ✨ #120):

  <Component className=[%tw "_"] />
  

I just wanted to consolidate all of these requests into a single issue that can be tracked more easily, as I think the solution could be the same for each of them.

I am reluctant to hard-code each of these cases into the extension because none of them are "official" methods of using Tailwind, and it may become a maintenance burden.

However, I am open to the idea of adding a user setting which would allow the definition of custom regular expressions. For example for tailwind-rn your regular expression might be something like: /\btailwind\([^)]+/ig

If you're interested in this feature feel free to "watch" this issue for updates, and post any comments/suggestions you may have.

[danielkcz]

The twin.macro also supports <div tw="text-black" />, can you add it to the list, please?

[tobkle]

Thank you @bradlc. Would it make sense to have those regex's as an array in the vscode settings? It'll be more extensible though. I think it's that what you meant with user settings. That's a good idea.

[bradlc]

The twin.macro also supports <div tw="text-black" />, can you add it to the list, please?

Added!

Thank you @bradlc. Would it make sense to have those regex's as an array in the vscode settings? It'll be more extensible though. I think it's that what you meant with user settings. That's a good idea.

Yes exactly. It would be a user setting.

[johot]

In my case I pull some tailwind class combinations into my own config objects. Could one solution be to simply add a comment above these variables and make it work?

For example a // @tw comment like below:

const theme: Theme = {
    borders: borders,
    input: {
      // @tw
      default:
        " border rounded-lg bg-white shadow-light-md  " + borders.default,
    }
}

[sudomf]

It would be great to have an option to use custom regex in the user settings. I'm using tailwind in React and Svelte as components props. So, have typesafe and the plugin hints with that would be awesome.

[will-t-harris]

Hey @bradlc, I'd be interested in trying to help with this issue. Where would you suggest I start digging into the code?