Support for Styled Components in React - It seems like an absolute necessity

[yedhink]

Thanks for the plugin. Most often i use tailwind macro in a styled component while doing react. But it seems that the auto-completions are not triggered inside a styled component for react. Example:-

const MainStyle = styled.main.attrs({
    // these wont get triggered for auto-completion unless i change ':' to '=' after 'className'
    className:"flex flex-col bg-gray-900 m-0 h-screen w-auto",
})`i cant get auto completion for tailwind within template literals too`

I'm not sure how this plugin triggers the auto-completion. But if the trigger area is fixed using a regex, would adding a regex similar tot this, to the possible patterns work(im not that good with regex, but still)?

styled.*[\`|\(](.*)\`$

Patterns of code that should be matched:-

styled.xxx``

styled.xxx.attrs({})``

[JDDoesDev]

I think this would need to be configurable for people to use either styled, Twin, tailwind.macro, etc. Maybe something available in settings.json like

{
  "autocompleteTailwindIn": [
    "tw",
    "twin",
    "styled"
  ]
}

where the array values get injected into the pattern matching section.

[yedhink]

@JDDoesDev I'm not quite understanding the usecase of having such a configuration option. Like the auto-completion is triggered using regex is what i believe. So when the cursor enters either the tailwind macro par or inside the styled section, then also automatically the suggestion should popup right?

[zamson]

Support for the twin.macro and Emotion would be really handy. Can we configure it to work somehow as is?

[timfee]

Have you tried editing your settings.json as follows?

  "tailwindCSS.includeLanguages": {
    "html": "javascript"
  }

Everything seems to work:

[will-t-harris]

@timfee: I tried changing my settings.json in the way you recommended, but I'm still not getting autocomplete to work in my project.

For reference, I'm trying to get the autocomplete working with twin.macro

[timfee]

@timfee: I tried changing my settings.json in the way you recommended, but I'm still not getting autocomplete to work in my project.

For reference, I'm trying to get the autocomplete working with twin.macro

Ah, in that case, you need to specify macro as the language. See the related setting documentation -- any luck?

[will-t-harris]

I'm not sure that I follow your suggestion.

I've tried both

 "tailwindCSS.includeLanguages": {
    "macro": "javascript"
  }

and

 "tailwindCSS.includeLanguages": {
    "html": "macro"
  }

Neither got autocomplete to work.

[timfee]

I'm not sure what extension macro is, or if using HTML language settings would make it hard to use, but if you Ctrl+P and choose Change language mode and set to HTML, does that work for you?

[will-t-harris]

Thanks for getting back to me, I'm using React so setting the language mode to HTML is not really sustainable.

Regardless, it does not allow for class autocompletion. It seems the solution I'm looking for is on the team's radar: tailwindlabs/tailwindcss#7553

[bradlc]

Yeah, I think this falls under tailwindlabs/tailwindcss#7553 as well