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

• lsp-tailwindcss

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)

+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 :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 :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 :init (setq! lsp-tailwindcss-experimental-class-regex ["tw([^])" "tw=\"([^\"])" "tw={\"([^\"}])" "tw\.\w+([^])" "tw\(.?\)([^])"]) (setq! lsp-tailwindcss-add-on-mode t))

+end_src