[[https://melpa.org/#/lsp-tailwindcss][file:https://melpa.org/packages/lsp-tailwindcss-badge.svg]]

* lsp-tailwindcss

*This project is deprecated.* It has been integrated into [[https://github.com/emacs-lsp/lsp-mode][lsp-mode]] directly. See [[https://github.com/emacs-lsp/lsp-mode/pull/5061][emacs-lsp/lsp-mode#5061]] for details.

-----

The [[https://github.com/emacs-lsp/lsp-mode][lsp-mode]] client for tailwindcss, using language server from [[https://github.com/tailwindlabs/tailwindcss-intellisense][official vscode plugin]].

[[file:images/autocomplete.png]]

* Installation
** Doom Emacs
in ~packages.el~
#+begin_src emacs-lisp
(package! lsp-tailwindcss :recipe (:host github :repo "merrickluo/lsp-tailwindcss"))
#+end_src

in ~config.el~
#+begin_src emacs-lisp
(use-package! lsp-tailwindcss :after lsp-mode)
#+end_src

** straight.el
#+begin_src emacs-lisp
(straight-use-package
 '(lsp-tailwindcss :type git :host github :repo "merrickluo/lsp-tailwindcss"))
#+end_src

** Language Server
*** Installation
+ =M-x lsp-install-server=, then select =tailwindcss=.

*** Update
+ =C-u M-x lsp-install-server=, then select =tailwindcss=.

* Changelog
** 0.3
*** breaking changes
+ back to use the vscode extension asset for language server installation, since the npm package don't get updates.

*** minor changes
+ more language server settings mapped to custom variables.
+ add new configuration =lsp-tailwindcss-skip-config-check= to skip the config file check, since it's hard to keep it the same with the language server.

** 0.2
*** breaking changes
+ now uses [[https://www.npmjs.com/package/@tailwindcss/language-server][tailwindcss language server]] instead of manually download the vscode extension file.

*** major changes
+ added =lsp-tailwindcss-major-modes=, see details in #Customization section.
+ allow global and workspace configuration for tailwindcss-language-server.
+ make variables =lsp-tailwindcss-server-dir=, =lsp-tailwindcss-server-file=, =lsp-tailwindcss-auto-install-server=, =lsp-tailwindcss-server-version= obsolete.

* Customization
** lsp-tailwindcss
*** =lsp-tailwindcss-add-on-mode=
Specify that if lsp-tailwindcss runs in add-on mode, see [[https://emacs-lsp.github.io/lsp-mode/page/faq/][in lsp-mode's documentation.]] This must be set before the package loads (use the init block in use-package instead of config block).
#+begin_src emacs-lisp
(use-package lsp-tailwindcss
  :after lsp-mode
  :init
  (setq lsp-tailwindcss-add-on-mode t))
#+end_src

default: =nil=.

*** =lsp-tailwindcss-major-modes= (since 0.2)
Specify lsp-tailwindcss should only starts when major-mode in the list or derived from them.
default: =rjsx-mode web-mode html-mode css-mode typescript-mode typescript-tsx-mode=.

** tailwindcss-language-server
All settings described in [[https://github.com/tailwindlabs/tailwindcss-intellisense#extension-settings][tailwindcss-intellisense]] except:
+ =tailwindCSS.includeLanguages=
  The activation of the language server is controlled by =lsp-tailwindcss--activate-p=, so this is not needed.

+ =tailwindCSS.colorDecorators=
  Emacs does not support color decorators.

Default value follows the default value in the documentation.

*** Global Configuration
Custom variable naming convention:
=tailwindCSS.emmetCompletions= => =lsp-tailwindcss-emmet-completions=.

** Rustywind (class sorter)
There are two functions integrate the [[https://github.com/avencera/rustywind][rustywind]] class sorter, =lsp-tailwindcss-rustywind= and =lsp-tailwindcss-rustywind-before-save=.

After install rustywind =npm i -g rustywind=, run =lsp-tailwindcss-rustywind= manually or add it to before-save-hook to use it.

#+begin_src emacs-lisp
(add-hook 'before-save-hook 'lsp-tailwindcss-rustywind-before-save)
#+end_src

* Troubleshooting
1. make sure the language server is installed, see [[#language-server][Install language server]].
2. run =M-x lsp-describe-sessions= to see if the =tailwindcss= language server is running.
3. run =M-x lsp-workspace-show-log= to see if there are any errors reported by language server.

* Q&A
** Unable to calculate the languageId for buffer ...
If you want to use lsp-tailwindcss in some other file types, like =erb=, you might see this error report from =lsp-mode=, the solution is configure the language id for it.

#+begin_src emacs-lisp
(add-to-list 'lsp-language-id-configuration '(".*\\.erb$" . "html"))
#+end_src

This is a requirement for lsp-mode, not just for =lsp-tailwindcss=, see https://github.com/emacs-lsp/lsp-mode/blob/563233fe72de6f32ffc6a1b3db0ec7f49c12cb50/lsp-mode.el#L694 .

** How to set up [[https://github.com/ben-rogerson/twin.macro][twin.macro]]?

twin.macro can be integrated using =lsp-tailwindcss-experimental-class-regex= variable (which is alias to =tailwindCSS.experimental.classRegex= . see the reference to [[ben-rogerson/twin.macro#227]])

#+begin_src emacs-lisp
(use-package! lsp-tailwindcss
  :after lsp-mode
  :init
  (setq! lsp-tailwindcss-experimental-class-regex ["tw([^]*)" "tw=\"([^\"]*)" "tw={\"([^\"}]*)" "tw\\.\\w+([^]*)" "tw\\(.*?\\)([^]*)"]))
#+end_src


Take a note that it can lead to [[https://emacs-lsp.github.io/lsp-mode/page/faq/#i-have-multiple-language-servers-registered-for-language-foo-which-one-will-be-used-when-opening-a-project][the conflict of lsp-servers priorities]] (i.e. some of the servers will not start). To fix this you need to use =lsp-tailwindcss-add-on-mode= too.

Set up with add-on mode:
#+begin_src emacs-lisp
(use-package! lsp-tailwindcss
  :after lsp-mode
  :init
  (setq! lsp-tailwindcss-experimental-class-regex ["tw`([^`]*)" "tw=\"([^\"]*)" "tw={\"([^\"}]*)" "tw\\.\\w+`([^`]*)" "tw\\(.*?\\)`([^`]*)"]) (setq! lsp-tailwindcss-add-on-mode t))
#+end_src