lsp-tailwindcss

The lsp-mode client for tailwindcss, using language server from official vscode plugin.

Installation

Doom Emacs

in packages.el

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

in config.el

(use-package! lsp-tailwindcss :after lsp-mode)

straight.el

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

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 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 in lsp-mode’s documentation. This must be set before the package loads (use the init block in use-package instead of config block).

(use-package lsp-tailwindcss
  :after lsp-mode
  :init
  (setq lsp-tailwindcss-add-on-mode t))

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 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 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.

(add-hook 'before-save-hook 'lsp-tailwindcss-rustywind-before-save)

Troubleshooting

1. make sure the language server is installed, see 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.

(add-to-list 'lsp-language-id-configuration '(".*\\.erb$" . "html"))

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 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 discussion)

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

Take a note that it can lead to 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:

(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))