how to run tailwindcss lsp in vue files

noor-tg commented 2 years ago

hey, I use emacs doom to develop web apps with vuejs. my setup is:

web-mode (for syntax highlight + html autocompelte)
lsp (+ volar lsp )

for example I use vue Single File component like:

<template>
   <!-- auto complete class names in class="" -->
   <div class="">
       {{ name }} <br />
      <!-- auto complete class names in class="" -->
      <input v-model="name" class="" />
   </div>
</template>
<script lang="ts" setup>
let name = ref('');
</script>

my installation process for tailwindcss and volar in emacs doom:

;; package.el
(package! lsp-volar :recipe (:host github :repo "jadestrong/lsp-volar"))
(package! lsp-tailwindcss :recipe (:host github :repo "merrickluo/lsp-tailwindcss"))

;; config.el
(use-package! lsp-volar)
(use-package! lsp-tailwindcss
  :init
  (setq lsp-tailwindcss-add-on-mode t))

(add-to-list 'auto-mode-alist '("\\.vue\\'" . web-mode))
(add-to-list 'lsp-language-id-configuration '(".*\\.vue$" . "web"))

I want to use tailwindcss beside volar lsp server
I want to autocomplete classes when write inside class value in html or any string in vue file

how to do it ?

thank you.

merrickluo commented 2 years ago

I haven't tried using it in vue files yet, but here are some debug steps you can try

did you install the language server itself? you can try M-x lsp-install-server and select tailwindcss
run M-x lsp-describe-sessions see if lsp-tailwindcss is running
run M-x lsp-workspace-show-log to see if there is any errors

VisionaryAppDev commented 2 years ago

Hello @nour-dev,

I have tried this package recently and it's working pretty well on my Nuxt 3 project, although drop-down completion it's a little slower than my experience using Webstorm. Maybe there is some configuration for the delay here.

Currently, I am using latest Emacs 29.0.50 build from source with gcc (native-comp) and Doom Emacs. I am also using lsp-mode. I have some server install like you did such as eslint, vola and vls. I did install both because vola doesn't work with my Nuxt 3 but vls does.

Here is my setup:

config.el


(straight-use-package
'(lsp-tailwindcss :type git :host github :repo "merrickluo/lsp-tailwindcss"))

(use-package! lsp-tailwindcss)


- package.el

(package! lsp-tailwindcss :recipe (:host github :repo "merrickluo/lsp-tailwindcss"))


- install language server

sudo npm install -g @tailwindcss/language-server



That's all and it's working. But I am not sure if I place all the config in the right place. Especially for `(straight-use-package
 '(lsp-tailwindcss :type git :host github :repo "merrickluo/lsp-tailwindcss"))`. Is it needed to put in `straight.el` or in the package.el since the README is a little confusing here. Maybe @merrickluo  could help clarify.

![image](https://user-images.githubusercontent.com/27724011/164960383-53991a59-eb12-4ddb-a492-78ff6c4c1354.png)

VisionaryAppDev commented 2 years ago

By the way, there is some problem with the completion here. Any class start with sm:, lg:, md: ... won't show the completion. Not sure if it is really the how it is.

merrickluo commented 2 years ago

@VisionaryAppDev you should only need to use packages.el. it's how you add your custom packages in doom emacs. The straight-use-package is for others doesn't use doom emacs. And since the package is in mepla now, it should work with just use-package too.

If : doesn't trigger completion, it might be a conflict between company-mode and the language server, I'll look into that.

merrickluo commented 2 years ago

I can't seem to reproduce the completion problem you are having, Is something particular about your setup?

VisionaryAppDev commented 2 years ago

Helllo @merrickluo,

The straight-use-package is for others doesn't use doom emacs.

Isn't straight suppose to be used by doom user? I saw doom emacs mentions that they are powered by straight.el on their github homepage.

VisionaryAppDev commented 2 years ago

I have Emacs and Doom latest version reinstall on my other machine and everything including sm: md: lg:... working as expected but i need to call M-x lsp multiple times and wait for a while before the completion show up. In some occasion, tailwind-lsp-server exit expected and require to restart while using.

By the way, on my other machine, completion seem too slow. I have the same language server on vscode and it is a lot more faster tbh.

https://user-images.githubusercontent.com/27724011/165678684-89382250-1a3f-462a-8a21-a5efaf9885d4.mp4

merrickluo commented 2 years ago

Isn't straight suppose to be used by doom user? I saw doom emacs mentions that they are powered by straight.el on their github homepage.

yes, that's the (package! lsp-tailwindcss) macro do, basically this macro will expand to

(straight-use-package
 '(lsp-tailwindcss :type git :host github :repo "merrickluo/lsp-tailwindcss"))

it's more complicated than this, but you get the idea.

The slowness you are experiencing is basically a emacs/lsp-mode problem, we only got one thread to run lisp code :( , so there is nothing I can do about that.

VisionaryAppDev commented 2 years ago

Hello @merrickluo,

I have run profiler and found the following result and not sure if it's useful.

we only got one thread to run lisp code :( , so there is nothing I can do about that.

Is that so? But I saw lsp mode claim that their performance is comparable to vscode. :(

merrickluo commented 2 years ago

Hi @VisionaryAppDev, your screenshot suggests most time spent is in lsp-mode sending requests to the server. This package is no more than a glue between lsp-mode and tailwindcss-language-server, it has nothing to do with performance. I suggest you open a ticket in lsp-mode for the performance issue.

Closing this issue since it should be configuration problems.

merrickluo / lsp-tailwindcss

how to run tailwindcss lsp in vue files #37