[[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 [[https://github.com/ben-rogerson/twin.macro/discussions/227][discussion]])

#+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