tailwindcss-colors.nvim

This plugin highlights Tailwind CSS class names when @tailwindcss/language-server is connected via the neovim built-in lsp client.

Requirements

• Neovim 0.5+

• @tailwindcss/language-server

  Can be installed with

  npm install -g @tailwindcss/language-server

  or with nvim-lsp-installer

  Don't forget to configure it after installation (via nvim-lspconfig for example)

Installation

Install using your favorite package manager (packer, vim-plug, etc).

packer.nvim

use {
  "themaxmarchuk/tailwindcss-colors.nvim",
  -- load only on require("tailwindcss-colors")
  module = "tailwindcss-colors"
  -- run the setup function after plugin is loaded 
  config = function ()
    -- pass config options here (or nothing to use defaults)
    require("tailwindcss-colors").setup()
  end
}

vim-plug

Plug 'themaxmarchuk/tailwindcss-colors.nvim'

Alternatively, you can manually install it.

Unix/Linux

git clone https://github.com/themaxmarchuk/tailwindcss-colors.nvim.git ~/.local/share/nvim/site/pack/tailwindcss-colors/start/

Windows Command Prompt

git clone https://github.com/themaxmarchuk/tailwindcss-colors.nvim.git %LOCALAPPDATA%\nvim-data\site\pack\tailwindcss-colors\start\

Windows Powershell

git clone https://github.com/themaxmarchuk/tailwindcss-colors.nvim.git "$env:LOCALAPPDATA\nvim-data\site\pack\packer\start\"

---

Enabling the plugin

To enable the plugin you have two options. You can simply call require("tailwindcss-colors").buf_attach(bufnr) somewhere in your lsp on_attach function.

This can be done via builtin-lsp, lsp-config, or nvim-lsp-installer (in their .setup() functions).

lsp-config example

local nvim_lsp = require("lspconfig")

local on_attach = function(client, bufnr) -- other stuff -- require("tailwindcss-colors").buf_attach(bufnr) end

nvim_lsp["tailwindcss"].setup({ -- other settings -- on_attach = on_attach, })

> [NvChad](https://github.com/NvChad/NvChad)

If you use NvChad, you might have noticed that the lsp configuration already defines an on_attach function. 

In that case you can wrap it like this:
```lua
-- looping through server names ...

if lsp = "tailwindcss" then
  -- warp the attach function
  opts.on_attach = function (_, bufnr)
    require('tailwindcss-colors').buf_attach(bufnr)
    attach(_, bufnr)
  end
end

The other way to is the use commands to enable the plugin for the current buffer:

:TailwindColorsAttach

:TailwindColorsDetach

:TailwindColorsToggle

Configuration

To configure, pass in your configuration options when you call the require("tailwindcss-colors").setup({ .. config options .. })

Note that calling the setup function is not required if you only want to use the default configuration.

Default configuration

-- Default user configuration
local user_config = {
colors = {
dark = "#000000",  -- dark text color
light = "#FFFFFF", -- light text color
},
commands = true -- should add commands
}

Example

-- if using packer, you can do this in
-- use {
--   config = function ()
--     ...
--   end
-- }
-- (for lazy loading)

-- For example, this will disable commands, -- but keep default colors for light/dark text require("tailwindcss-colors").setup({ commands = false })

## Commands

Commands can be optionally disabled in the configuration, they are on by default.

> `:TailwindColorsAttach`

Attaches to the current buffer.

> `:TailwindColorsDetach`

Detaches from the current buffer.

> `:TailwindColorsRefresh`

Refreshes highlights in the current buffer.

In order to keep the plugin fast, it only updates lines that actually change. This means that if you update your tailwind config, the colors won't be updated unless you run this command.

> `:TailwindColorsToggle`

Toggles the highlighting in the current buffer. (same as attach/detach)

## Contributing

This is my first neovim plugin, and my first time writing any lua.

* Have an idea? 
* See a better way to do something?
* Found a bug?

Feel free to [submit a PR](https://github.com/themaxmarchuk/tailwindcss-colors.nvim/pulls).

## Some Ideas (Roadmap?)
* Optionally watch tailwind config for changes and refresh all buffers
* [nvim-cmp](https://github.com/hrsh7th/nvim-cmp) colors in completion list (similar to lspkind)
* Extmark (nvim virtual text) based color squares just like vscode?

## Credits
Inspired by [nvim-colorizer.lua](https://github.com/norcalli/nvim-colorizer.lua) and [kabouzeid](https://github.com/kabouzeid)'s [dotfiles](https://github.com/kabouzeid/dotfiles/blob/main/config/nvim/lua/lsp-documentcolors.lua)