Using Lazy.nvim - it's installed but not showing up properly.

[jjaimealeman]

I followed the instuctions and copy/pasted the snippet for lazy.nvim

I am using this setup by Folke https://github.com/LazyVim/starter but don't know how else to get it working. I am still quite new to using Lazy.nvim.

It is showing as loaded in Lazy.

  {
    "roobert/tailwindcss-colorizer-cmp.nvim",
    lazy = false,
    -- optionally, override the default options:
    config = function()
      require("tailwindcss-colorizer-cmp").setup({
        color_square_width = 2,
      })
    end,
  },

I added lazy = false, did I that right?

[roobert]

Hi @jjaimealeman, thank you for opening this issue.

Have you removed this line from your config? https://github.com/LazyVim/starter/blob/888600e7ff4b0d8be0db18db932632830bfb7804/lua/plugins/example.lua#L3

[jjaimealeman]

@roobert

This is the entirety of my short plugins.lua file

return {
  {
    "zbirenbaum/copilot.lua",
    lazy = false,
    cmd = "Copilot",
    event = "InsertEnter",
    config = function()
      vim.schedule(function()
        require("copilot").setup()
      end)
    end,
  },
  {
    "Edeneast/nightfox.nvim",
    lazy = false, -- make sure we load this during setup if it is your maincolorscheme
    priority = 1000, -- make sure we load this before all the other start plugins
    config = function()
      -- load the colorscheme here
      vim.cmd([[colorscheme nightfox]])
    end,
  },
  {
    "mbbill/undotree",
    lazy = true,
    cmd = { "UndotreeShow", "UndotreeToggle", "UndotreeHide", "UndotreeFocus" },
  },
  { "wakatime/vim-wakatime", lazy = false },
  {
    "roobert/tailwindcss-colorizer-cmp.nvim",
    lazy = true,
    -- optionally, override the default options:
    config = function()
      require("tailwindcss-colorizer-cmp").setup({
        color_square_width = 2,
      })
    end,
  },
}

[ryoppippi]

Did you configure this one? https://github.com/roobert/tailwindcss-colorizer-cmp.nvim#standard-neovim

[jjaimealeman]

Not showing 🤔

Lazy is showing it properly

I followed the configuration as mentioned here: https://github.com/roobert/tailwindcss-colorizer-cmp.nvim#lazynvim

All I added was lazy = false,

---

I sweat I'm not Lazy 🤣, I'm still understanding how Lazy works. Used Packer for so long.

[roobert]

@jjaimealeman as @ryoppippi helpfully pointed out, it seems like you may have followed the installation section, but not the usage section of the docs! Please let me know if you still have problems after adding the following to your config:

require("cmp").config.formatting = {
  format = require("tailwindcss-colorizer-cmp").formatter
}

edit:

I sweat I'm not Lazy 🤣, I'm still understanding how Lazy works. Used Packer for so long.

Just wanted to add, never be ashamed to ask questions, we're all still learning!

[smileart]

@roobert I've got the same issue. I have the plugin installed, configured, loaded and enabled, but here's how my cmp menu looks like:

[roobert]

@smileart - hi! Did you also follow the Usage section as mentioned in the post above yours?

If so I'd need to see your entire config to have a better chance of understanding why this isn't working for you.

Hope this helps!

[smileart]

@roobert sure did, but to no effect... I'm not certain I can share the entire config (simply because it's too big), but here are the relevant snippets:

Installed it with Packer:

use { "roobert/tailwindcss-colorizer-cmp.nvim", config = get_settings('colorizer') }

JIC added config (loaded from colorizer.lua with get_settings function):

require("tailwindcss-colorizer-cmp").setup({})

Configured CMP to use it as a formatter:

local cmp = require'cmp'

-- Display TailwindCSS colours in CMP autocomplete
cmp.config.formatting = {
  format = require("tailwindcss-colorizer-cmp").formatter
}

:PackerStatus shows tailwindcss-colorizer-cmp.nvim in the list, so I assume it's loaded.

[jjaimealeman]

Well, here's my config https://github.com/jjaimealeman/nvim/blob/main/lua/plugins/myplugins.lua#L29

Gotta admit, I just don't know where I'm supposed to add this bit 🤔

require("cmp").config.formatting = {
  format = require("tailwindcss-colorizer-cmp").formatter
}

---

Just wanted to add, never be ashamed to ask questions, we're all still learning!

Thanks for that 👍 I'm still learning HOW to add other plugins into LazyVim. With Packer it was so simple, but I love accepting new challenges, and I am far more productive with neovim as my editor, as opposed to VS Code.

[roobert]

Well, here's my config https://github.com/jjaimealeman/nvim/blob/main/lua/plugins/myplugins.lua#L29

It doesn't look like you're loading the file myplugins.lua anywhere. You'll need to edit config/lazy.lua (https://github.com/jjaimealeman/nvim/blob/main/lua/config/lazy.lua#L14) and after line 14 add something like:

    { import = "plugins/myplugins" },

Gotta admit, I just don't know where I'm supposed to add this bit 🤔

I would add it after cmp and this plugin is loaded. Perhaps at the bottom of config/lazy.lua after line 42.

[roobert]

@roobert sure did, but to no effect... I'm not certain I can share the entire config (simply because it's too big), but here are the relevant snippets:

Installed it with Packer:

use { "roobert/tailwindcss-colorizer-cmp.nvim", config = get_settings('colorizer') }

Could you share the implementation of get_settings or try changing this to match the recommended settings as a test?

JIC added config (loaded from colorizer.lua with get_settings function):

require("tailwindcss-colorizer-cmp").setup({})

Please also try removing the {} from within the setup call here..

Configured CMP to use it as a formatter:

local cmp = require'cmp'

-- Display TailwindCSS colours in CMP autocomplete
cmp.config.formatting = {
  format = require("tailwindcss-colorizer-cmp").formatter
}

:PackerStatus shows tailwindcss-colorizer-cmp.nvim in the list, so I assume it's loaded.

The plugin may be loaded but my best guess is that cmp is not, for some reason, properly configured to use it.

If my above suggestions don't work then this will be difficult to debug without seeing the whole config, perhaps you could upload it to github?

Hope this helps!

[smileart]

Could you share the implementation of get_settings or try changing this to match the recommended settings as a test?

Sure, but it's 100% not an issue here since this function loads configs for the rest of 90 plugins and everything is ok with all of them.

local function get_settings(plugin_name)
  return string.format('require("settings/%s")', plugin_name)
end

Please also try removing the {} from within the setup call here...

Done. Nothing's changed.

The plugin may be loaded but my best guess is that cmp is not, for some reason, properly configured to use it.

Well, :CmpStatus shows these:

# ready source names
- buffer
- calc
- emoji
- look
- ultisnips
- path
- spell
- nvim_lsp:tailwindcss
- nvim_lsp:tsserver
- copilot

# unavailable source names                                                                                                                                                                                                                   
- nvim_lua

And after all, how would Cmp show the autocomplete menu/options if it was not working?

I've disabled all the plugins apart from Mason/nvim-cmp/lsp-config/cmp-nvim-lsp (to exclude a possibility of any conflict with other plugins), but the autocomplete menu is still without colour swatches.

I'll be debugging a bit more and will try to reproduce the bare minimum config on a virtual machine because I don't think sharing my 90-plugins nvim setup would make it easier for you anyway. Furthermore, I'll keep you posted if I find something or have a reproducible minimal setup. Thank you. 🤝

[smileart]

Ok, I had a moment to debug it and I've found two issues:

1. The require("cmp").config.formatting = {…} suggested in REDAME.md didn't work for me, but adding it into require("cmp").setup({...}) did work and the plugins got used/engaged on autocomplete (not sure how and why it's the case, didn't have enough time to investigate)
2. ...but, after the plugin got called, it started failing at line 125 of init.lua cause README.md says that configuration is optional, so I didn't add it, but when you don't config it the default parameter is called color_hint_width while in rep function color_square_width is expected, so nil gets passed as the second argument, so it fails. I've changed it to color_hint_width and it works now...

The name color_hint_width makes more sense to me, since if one configs it with a value of 5 or 10, then it's not going to be a square anymore. Anyway, I'd create a PR, but the fix is tiny, so I'd suggest you do it yourself.

Another question: your colour class has an appropriate background when already in the code, is it something tailwindcss-colorizer-cmp.nvim is supposed to do as well or did you use/did something else?

Thank you for the plugin and your patience with this issue. 🙏

UPD: Configured colours in code with https://github.com/NvChad/nvim-colorizer.lua 👍 😉

[roobert]

1. The require("cmp").config.formatting = {…} suggested in REDAME.md didn't work for me, but adding it into require("cmp").setup({...}) did work and the plugins got used/engaged on autocomplete (not sure how and why it's the case, didn't have enough time to investigate)

Ah strange!

2. ...but, after the plugin got called, it started failing at line 125 of init.lua cause README.md says that configuration is optional, so I didn't add it, but when you don't config it the default parameter is called color_hint_width while in rep function color_square_width is expected, so nil gets passed as the second argument, so it fails. I've changed it to color_hint_width and it works now...

The name color_hint_width makes more sense to me, since if one configs it with a value of 5 or 10, then it's not going to be a square anymore. Anyway, I'd create a PR, but the fix is tiny, so I'd suggest you do it yourself.

Good catch! I think initially this wasn't configurable which is why I called it square. For now I've fixed the default so it doesn't break existing users configs but at some point I'll try to change this in a backwards compatible manner.

Another question: your colour class has an appropriate background when already in the code, is it something tailwindcss-colorizer-cmp.nvim is supposed to do as well or did you use/did something else?

Thank you for the plugin and your patience with this issue. 🙏

UPD: Configured colours in code with https://github.com/NvChad/nvim-colorizer.lua 👍 😉

I've added a link to NvChad/nvim-colorizer.lua to the README.

Glad you got everything sorted out and thank you for replying to this thread - hopefully it can help others in the future!

[stevedylandev]

Also dropping this here in case anyone is using lsp-zero

local lsp = require('lsp-zero').preset({
  name = 'recommended',
  set_lsp_keymaps = true,
  manage_nvim_cmp = true,
  suggest_lsp_servers = false,
})

-- (Optional) Configure lua language server for neovim
lsp.nvim_workspace()

-- config to setup tailwindcss-colorizer-cmp
lsp.setup_nvim_cmp({
  formatting = {
    format = require("tailwindcss-colorizer-cmp").formatter
  }
})

lsp.setup()

[jjaimealeman]

Decided to revisit this issue.

I finally got it working 👍

-- init.lua
require("config.lazy")

-- this doesnt work 👎
-- require("cmp").config.formatting = {
--   format = require("tailwindcss-colorizer-cmp").formatter,
-- }

--- this does work 👍
require("cmp").setup({
  formatting = { format = require("tailwindcss-colorizer-cmp").formatter },
})

-- lua/plugins/tailwindcss.lua
--
return {
  "roobert/tailwindcss-colorizer-cmp.nvim",
  lazy = false,
  -- optionally, override the default options:
  config = function()
    require("tailwindcss-colorizer-cmp").setup({
      color_square_width = 2,
    })
  end,
}

Am using this config setup https://www.lazyvim.org/

Thank you for a wonderful plugin @roobert Am closing this issue now. Enjoy your weekend y'all!

[Myzel394]

I'm facing the same issue, tried all methods above already :/

[vricop]

In case anyone is having issues trying to configure this plugin with cmp configured with custom settings. Here's how I made it work:

I took a look at the function signature for require("tailwindcss-colorizer-cmp").formatter(entry, vim_item). LSP tells me is expecting two parameters, entry & vim_item. Since I configured my cmp to have some Nerdfont icons so that can match those used by VSCode, I had to do the following:

.config/nvim/lua/core/plugins/tailwindcss-colorizer-cmp.lua:

return {
  "roobert/tailwindcss-colorizer-cmp.nvim",
  -- optionally, override the default options:
  config = function()
    require("tailwindcss-colorizer-cmp").setup({
      color_square_width = 2,
    })
  end
}

Note: I'm omitting all irrelevant config, just showing the formatting table

.config/nvim/lua/core/plugins/cmp.lua:

return {
  {
    "hrsh7th/nvim-cmp",
    dependencies = {
      -- config...
    },
    config = function()
      local cmp = require("cmp")
      require("cmp").setup({
    experimental = { ghost_text = true },
    snippet = { ... },
    window = { ... },
    mapping = ...,
    sources = ...,
    formatting = {
          format = function(entry, vim_item)
            local kind_icons = {
              Text = "",
              Color = "",
              Method = "",
              Function = "",
              Constructor = "",
              Field = "",
              Variable = "",
              Class = "",
              Interface = "",
              Module = "",
              Property = "",
              Unit = "",
              Value = "",
              Enum = "",
              Keyword = "",
              Snippet = "",
              File = "",
              Reference = "",
              Folder = "",
              EnumMember = "",
              Constant = "",
              Struct = "",
              Event = "",
              Operator = "",
              TypeParameter = "",
            }

            -- Kind icons
            vim_item.kind = kind_icons[vim_item.kind]

            -- Source
            vim_item.menu = ({
          buffer = " (Buffer)",
          nvim_lsp = " (LSP)",
          luasnip = " (LuaSnip)",
          nvim_lua = " (Lua)",
          latex_symbols = " (LaTeX)",
            })[entry.source.name]

            -- AFTER CUSTOMIZING MY ICONS I PASS `entry` & `vim_item` to formatter function
            require("tailwindcss-colorizer-cmp").formatter(entry, vim_item)

            return vim_item
          end,
        },
      })
      -- Other configs...
    end,
  },
}

I hope this helps others with the same problem.