Getting tw`` to autocomplete

[nkabbara]

Hi Guys,

I'm trying to get autocompletion to work on something like <RegisterForm css={tw`bg-gray-100`}

I added the following to coc-settings.json, but I don't think I'm understanding how to config this plugin correctly.

"tailwindCSS.headwind.classRegex": { "javascriptreact": "(?:\bclassXame\s*=\s*\"\'[\"\'])|(?:{tw\s*([_a-zA-Z0-9\\s\\-\\:\\/]*))" }

Is this supposed to activate tailwind autocompletion for patterns like tw`tailwind-stuff` ?

[kafendt]

I am also interested in this. Did you find a solution?

[nkabbara]

:( Nope. We ended up using class attributes which works out of the box. But also still interested in getting this to work for a personal project. I'll take a look again when back to it.

[kafendt]

I got it working by reaplacing lines 6883 in lsp/tailwindcss-language-server/dist/index.js with:

        let a = find(/\b(class(?:Name)?|tw|(?:styled|tw)\.\w+|(?:styled|tw)\(\w+\))[= ]?(?:\[%tw )?([`'"{])/g, o);

and line 6886 with:

          let t = e.index + e[1].length + 2;

Now all styled and tw variants of twin.macro autocomplete correctly

[hallettj]

I think a solution could be to adopt support for the tailwindCSS.experimental.classRegex setting from tailwindcss-intellisense - see https://github.com/ben-rogerson/twin.macro/discussions/227

[Knapptr]

I got it working using this PR https://github.com/iamcco/coc-tailwindcss/pull/70, and editing the package.json to include the following:

tailwindCSS.experimental.classRegex": {
                         "type": "array",
                         "scope": "language-overridable",
                         "default": [
                            "tw`([^`]*)",
                             "tw=\"([^\"]*)",
                             "tw={\"([^\"}]*)",
                            "tw\\.\\w+`([^`]*)",
                            "tw\\(.*?\\)`([^`]*)"
                        ]
                    }, ```

[jpribyl]

Just to piggy back on this- if you want hover definitions to work then replace line 6151 in lsp/tailwindcss-language-server/dist/index.js with:

        if (!/\b(tw|class)(Name)?[= ](?:\[%tw )?["'][^"']*$/.test(n)) return null;

and line 6158 with:

        let s = a.match(/\b(?:tw|class)(Name)?[= ](?:\[%tw )?["']([^"']*)$/);