This plugin highlights Tailwind CSS class names when @tailwindcss/language-server is connected via the neovim built-in lsp client.
-
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)
Install using your favorite package manager (packer, vim-plug, etc).
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
}
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\"
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,
})
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:
-- 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
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 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)
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.
- Optionally watch tailwind config for changes and refresh all buffers
- nvim-cmp colors in completion list (similar to lspkind)
- Extmark (nvim virtual text) based color squares just like vscode?
Inspired by nvim-colorizer.lua and kabouzeid's dotfiles