Cant see any Tailwind commands, and no color clue in code

[AlejandroSanchez90]

Describe the bug all that works is the cmp part, i can see the colors, but when i select the color i dont see it colorized, its just plain text, and i dont have access to any :Tailwind commands

any idea?

im using nvim kickstarted and followed the guide from tailwind-tools

To Reproduce Steps to reproduce the behavior:

1. Go to any file
2. go inside className props
3. do something like bg-red-500
4. select it from cmp (it has color)
5. i see the class been applied but no color

Expected behavior should be able to see the colored text

Screenshots If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• Operating system WSL2
• Neovim version or commit 0.10.1
• Nvim-treesitter commit
• tailwind-language-server version 0.0.27

Additional context Add any other context about the problem here.

-- tailwind-tools.lua
return {
  'luckasRanarison/tailwind-tools.nvim',
  name = 'tailwind-tools',
  build = ':UpdateRemotePlugins',
  dependencies = {
    'nvim-treesitter/nvim-treesitter',
    'nvim-telescope/telescope.nvim', -- optional
    'neovim/nvim-lspconfig', -- optional
  },
  opts = {}, -- your configuration
}

[luckasRanarison]

Sorry for the late response, if anyone has the same issue please send a link to your config if possible, and tree view of your project using the tree command or a screenshot please.

[Edgar200021]

Sorry for the late response, if anyone has the same issue please send a link to your config if possible, and tree view of your project using the tree command or a screenshot please.

It's not working for me either

[luckasRanarison]

@Edgar200021 Do the commands show? If so then it's related to the language server, if you're working on a V4 project update your language server to the latest version that could be the reason.

If it still doesn't work, please provide more details so I can try to debug it.

[end3r-man]

@Edgar200021 Do the commands show? If so then it's related to the language server, if you're working on a V4 project update your language server to the latest version that could be the reason.

If it still doesn't work, please provide more details so I can try to debug it.

https://github.com/user-attachments/assets/d03cc0f9-bb10-47e8-a06d-1dcec5a63891

[end3r-man]

		"luckasRanarison/tailwind-tools.nvim",
		name = "tailwind-tools",
		build = ":UpdateRemotePlugins",
		dependencies = {
			"nvim-treesitter/nvim-treesitter",
			"neovim/nvim-lspconfig",
		},
		config = function()
			require("tailwind-tools").setup({
				document_color = {
					enabled = true,
					kind = "inline",
					inline_symbol = "󰝤 ",
				},
			})
		end,

https://github.com/end3r-man/laravel-nvim.git

[bryanmaina]

This may help

Mine wasn't working this morning with tailwind v4. Here is what I do when this happens. Often this happens to me after running updates on WSL or node.js. So I often just run the followings just to make sure that Neovim and most plugin I use have everything it needs.

1. Stop any tailwind cli process that is running and or just stop WSL using a PowerShell terminal. And start a fresh new WSL process.

wsl --shutdown

2. Install python:

sudo apt install python3

3. Install pip

sudo apt install python3-pip

4. Install Neovim node.js client

npm install -g neovim

5. Sometime the tailwind language server that is installed by mason does not work so I just uninstall it and install it with npm.

npm install -g @tailwindcss/language-server

6. Last thing: tailwind v4 does not require a tailwind.config.js file anymore. But I still keep one because lsp might require it if you are using the default config just soo that it can attach the proper language server to my buffers. In this case for a Rust based project that uses tailwind. (I don't know if this is yet fixed on lsp side).

My config

a. tailwind-tools.nvim config

return {
	"luckasRanarison/tailwind-tools.nvim",
	name = "tailwind-tools",
	build = ":UpdateRemotePlugins",
	ft = { "rust", "html" },
	dependencies = {
		"nvim-treesitter/nvim-treesitter",
		"nvim-telescope/telescope.nvim", -- optional
		"neovim/nvim-lspconfig", -- optional
    "onsails/lspkind-nvim",
	},
	opts = { -- your configuration
		document_color = {
			enabled = true, -- can be toggled by commands
			kind = "inline", -- "inline" | "foreground" | "background"
			inline_symbol = "󰝤 ", -- only used in inline mode
			debounce = 200, -- in milliseconds, only applied in insert mode
		},
		conceal = {
			enabled = false, -- can be toggled by commands
			min_length = nil, -- only conceal classes exceeding the provided length
			symbol = "󱏿", -- only a single character is allowed
			highlight = { -- extmark highlight options, see :h 'highlight'
				fg = "#38BDF8",
			},
		},
		custom_filetypes = {}, -- see the extension section to learn how it works
		extension = {
			patterns = { -- a map of filetypes to Lua pattern lists
				-- example:
				rust = { "class=[\"']([^\"']+)[\"']" },
				-- javascript = { "clsx%(([^)]+)%)" },
			},
		},
	},
}

b. My inside my lsp config

	lspconfig.tailwindcss.setup({
		on_attach = M.on_attach,
		capabilities = M.capabilities,
		on_init = M.on_init,
		filetypes = {
			"css",
			"scss",
			"sass",
			"postcss",
			"html",
			"javascript",
			"javascriptreact",
			"typescript",
			"typescriptreact",
			"svelte",
			"vue",
			"rust",
			-- "rs",
		},
		experimental = {
			classRegex = {
				[[class="([^"]*)]],
				'class=\\s+"([^"]*)',
			},
		},
		root_dir = require("lspconfig").util.root_pattern(
			"tailwind.config.js",
			"tailwind.config.ts",
			"postcss.config.js",
			"postcss.config.ts",
			"package.json",
			"node_modules"
		),
	})

c. I use cmp for completion

local cmp = require("cmp")

local options = {
	completion = { completeopt = "menu,menuone" },

	snippet = {
		expand = function(args)
			require("luasnip").lsp_expand(args.body)
		end,
	},

	mapping = {
		["<C-p>"] = cmp.mapping.select_prev_item(),
		["<C-n>"] = cmp.mapping.select_next_item(),
		["<C-d>"] = cmp.mapping.scroll_docs(-4),
		["<C-f>"] = cmp.mapping.scroll_docs(4),
		["<C-Space>"] = cmp.mapping.complete(),
		["<C-e>"] = cmp.mapping.close(),

		["<CR>"] = cmp.mapping.confirm({
			behavior = cmp.ConfirmBehavior.Insert,
			select = true,
		}),

		["<Tab>"] = cmp.mapping(function(fallback)
			if cmp.visible() then
				cmp.select_next_item()
			elseif require("luasnip").expand_or_jumpable() then
				require("luasnip").expand_or_jump()
			else
				fallback()
			end
		end, { "i", "s" }),

		["<S-Tab>"] = cmp.mapping(function(fallback)
			if cmp.visible() then
				cmp.select_prev_item()
			elseif require("luasnip").jumpable(-1) then
				require("luasnip").jump(-1)
			else
				fallback()
			end
		end, { "i", "s" }),
	},

	formatting = {
		format = require("lspkind").cmp_format({
			before = require("tailwind-tools.cmp").lspkind_format,
		}),
	},

	sources = {
		{ name = "nvim_lsp" },
		{ name = "luasnip" },
		{ name = "buffer" },
		{ name = "nvim_lua" },
		{ name = "path" },
		{ name = "crates" },
	},
}

return vim.tbl_deep_extend("force", options, require("nvchad.cmp"))

I hope all of this call help you. I went through this process this morning and it solved the problem for me.