Skip to main content

Biome and TailwindCSS Setup in Doom Emacs

Currently, I'm working on a React project with Doom Emacs. Doom Emacs has 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 found in Github. First, add the following in packages.el:

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

Then, in config.el, add this:

(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 for this.

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

In config.el, here is my config code:

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