Add tailwindcss support

[itome]

Tailwind css support

• https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
• Runs as add on
• Tailwind intellisense has no installable binary, so I directory download it from vscode extension (Same as eslint lsp)

[itome]

@yyoncho ↑ Does this commit fit your intentions?

[yyoncho]

@yyoncho ↑ Does this commit fit your intentions?

Looks good, but the best way to ensure that it works fine is to compare the emacs behaviour with vscode one. I also tend to compare the client/server logs in both.

[itome]

Thanks, I'll check it later. And I want to implement hover preview feature in tailwindcss-intellisense

Here is original implementation. https://github.com/tailwindlabs/tailwindcss-intellisense/blob/b3c17cf5c9d1d74091a4a5ee0504696bb2ce1c46/packages/tailwindcss-intellisense/src/lsp/server.ts#L216

lsp-mode (or lsp-ui ?) support this?

[yyoncho]

Here is original implementation. https://github.com/tailwindlabs/tailwindcss-intellisense/blob/b3c17cf5c9d1d74091a4a5ee0504696bb2ce1c46/packages/tailwindcss-intellisense/src/lsp/server.ts#L216

lsp-mode (or lsp-ui ?) support this?

You have linked the server, not the client. This is normal onHover which is supported in both lsp-mode via eldoc and in lsp-ui

[yyoncho]

Yes.

On Thu, Dec 24, 2020 at 11:24 AM Takeshi Tsukamoto [email protected] wrote:

@itome commented on this pull request.

In clients/lsp-tailwindcss.el https://github.com/emacs-lsp/lsp-mode/pull/2438#discussion_r548463986:

+(defun lsp-tailwindcss--config-updated ()

• ;; FIXME: Update decorations in editor, see original implementation
• ;; https://github.com/tailwindlabs/tailwindcss-intellisense/blob/b3c17cf5c9d1d74091a4a5ee0504696bb2ce1c46/packages/tailwindcss-intellisense/src/lib/registerColorDecorator.ts#L125
• t)

+(defun lsp-tailwindcss--config-error ()

• ;; FIXME: Update decorations in editor and show error message, see original implementation
• ;; https://github.com/tailwindlabs/tailwindcss-intellisense/blob/b3c17cf5c9d1d74091a4a5ee0504696bb2ce1c46/packages/tailwindcss-intellisense/src/lib/registerColorDecorator.ts#L129
• ;; https://github.com/tailwindlabs/tailwindcss-intellisense/blob/b3c17cf5c9d1d74091a4a5ee0504696bb2ce1c46/packages/tailwindcss-intellisense/src/lib/registerConfigErrorHandler.ts#L5

So it's already implemented and I have nothing to do about this?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/emacs-lsp/lsp-mode/pull/2438#discussion_r548463986, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADFFHFRB2KKNOAIJRLKTK7LSWMCGPANCNFSM4VH3OCLA .

[itome]

In my environment, tailwind hover preview seems not working. Any additions configuration is required for hover preview?

[yyoncho]

Check what textDocument/hover is returning, call it explicitly via M-x lsp-describe-thing-at-point

[itome]

lsp-describe-thing-at-point timeout with following error message

lsp-request: Timeout while waiting for response. Method: textDocument/hover.

[yyoncho]

lsp-describe-thing-at-point timeout with following error message

lsp-request: Timeout while waiting for response. Method: textDocument/hover.

I am not quite sure what might be causing that - you have to check the server.

[Reductions]

Is there any progress on this pull request?

[merrickluo]

for anyone interested, I made a tailwindcss lsp client here, didn't notice this PR when I started 😥️. Although I haven't implemented all the options this PR has, but it works. feel free to try it out!

[CurralesDragon]

Could someone help me out, im new to emacs i'v moved from vscode. I can set extra classNames on vscode quite easily ;

  "tailwindCSS.experimental.classRegex": ["tailwind\\('([^)]*)\\')", "'([^']*)'"]

How can i set this in emacs?

I'v tried:

(defcustom lsp-tailwindcss-experimental-class-regex '("tailwind\\('([^)]*)\\')" "'([^']*)'")
  ""
  :type '(repeat string)
  :package-version '(lsp-mode . "7.1"))

(require 'lsp-protocol)
(require 'lsp-mode)
(lsp-register-custom-settings '(("tailwindCSS.experimental.classRegex" lsp-tailwindcss-experimental-class-regex )))

But the lsp server hangs with an error Wrong type argument: symbolp, "tailwind\\('([^)]*)\\')"

What's wrong here?

[yyoncho]

What's wrong here?

It should be vector, not list.

[CurralesDragon]

What's wrong here?

It should be vector, not list.

Could you give an example with the above? as its not behaving as expected

(vector "tailwind\\('([^)]*)\\')" "'([^']*)'")

doesn't work

I seen there is potentially a type of lsp-vector-string, so i also tried:

["tailwind\\('([^)]*)\\')", "'([^']*)'"]

Which will only use the first string in the array?

[VisionaryAppDev]

Just curious if tailwind support will come to life anytime soon? it's been a while now and haven't seen any update at all.

[yyoncho]

@VisionaryAppDev AFAICS https://github.com/merrickluo/lsp-tailwindcss is actively developed. Isn't it sufficient?

[VisionaryAppDev]

Yes it is a great project. But I found multiple tailwind projects is suspended and mentioned this pull request. And since I saw this pull request is inactive for so long so i just wondering if it's going to merge and bring lsp mode out of the box. And I wanted to see if this one will be faster? I have tried lsp-tailwindcss but it's quite slow. merrickluo mentioned that it's because Emacs is using a single thread.

[yyoncho]

And I wanted to see if this one will be faster?

@VisionaryAppDev - the speed is not relevant to the server configuration. If M-x lsp-doctor is all green then there isn't a lot we can do ATM.

[carusog]

@merrickluo https://github.com/merrickluo/lsp-tailwindcss is awesome, but, AFAIK, it's missing auto-completion of classes in Svelte mode, as well as color preview. It would be great to have a complete solution to support TW out of the box. Alternatively, we could help @merrickluo with their implementation.