Setting up Tailwind CSS and Biome LSP in Doom Emacs

Currently, I’m working on a React project with Doom Emacs. Doom Emacs is amazing, with good support for Javascript and Typescript. However, it lacks support for Tailwind and Biome, which I’m using in the project.

To set-up Tailwind, I followed the instructions for lsp-tailwindcss in Github. First, add the following in packages.el:

1
2
3
4

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

Then, in config.el, add this:

1
2
3

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

To set-up Biome, I used lsp-biome. I adapted the above setup for Tailwind to configure lsp-biome.

1
2
3
4

(package! lsp-biome
          :recipe
          (:host github
           :repo "cxa/lsp-biome"))

In config.el, I placed the following config code:

1
2
3
4

(use-package lsp-biome
             :init (defun my/lsp-biome-active-hook ()
             (setq-local apheleia-formatter '(biome)))
             :config (add-hook 'lsp-biome-active-hook #'my/lsp-biome-active-hook))

For LSP and completion to work, both Tailwind and Biome must be available in the PATH or available in node_modules/.