Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/merrickluo/lsp-tailwindcss

the lsp-mode client for tailwindcss
https://github.com/merrickluo/lsp-tailwindcss

Last synced: 8 days ago
JSON representation

the lsp-mode client for tailwindcss

Awesome Lists containing this project

README 

        
[[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 :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