What is the correct way to set up Tailwind colors?

[avilesj]

I have been trying to accomplish this through menu.draw.components.kind_icon by using ctx.kind_hl, however I still get the default green icon. I am using nvim-web-devicons.

I did inspect Folke's config for LazyVim, which happens to accomplish this, yet I can't pin point exactly where this is configured. LazyVim does not seem to explicitly declare anything under draw other than treesitter = { lsp }, which I am also doing.

(I am on mobile -- sorry for the poor formatting)

[hrqmonteirodev]

No one will answer? Wtf?

[idr4n]

This config is working for me to show tailwind colors, assuming you have the tailwind language server properly configured in neovim:

require('blink.cmp').setup {
  cmdline = {
    completion = {
      menu = { auto_show = true },
      list = { selection = { preselect = false, auto_insert = true } },
    },
  },

  sources = {
    default = { "lsp", "path", "buffer", "snippets", },
  },

  completion = {
    accept = { auto_brackets = { enabled = true } },
    list = { selection = { preselect = false, auto_insert = true } },
    menu = {
      draw = {
        gap = 2,
        components = {
          kind_icon = {
            text = function(ctx)
              if require("blink.cmp.sources.lsp.hacks.tailwind").get_hex_color(ctx.item) then
                return "󱓻"
              end
              return ctx.kind_icon .. ctx.icon_gap
            end,
          },
        },
      },
    },
    documentation = {
      auto_show = true,
      auto_show_delay_ms = 200,
    },
  },

  keymap = {
    preset = "enter",
    ["<C-space>"] = { "show", "show_documentation", "hide_documentation" },
    ["<Tab>"] = { "select_next", "fallback" },
    ["<S-Tab>"] = { "select_prev", "fallback" },
    ["<Up>"] = { "select_prev", "fallback" },
    ["<Down>"] = { "select_next", "fallback" },
    ["<C-e>"] = { "hide", "fallback" },
    ["<C-y>"] = { "select_and_accept" },
    ["<C-j>"] = { "snippet_forward", "fallback" },
    ["<C-k>"] = { "snippet_backward", "fallback" },
    ["<C-p>"] = { "select_prev", "fallback" },
    ["<C-n>"] = { "select_next", "fallback" },
    ["<C-b>"] = { "scroll_documentation_up", "fallback" },
    ["<C-f>"] = { "scroll_documentation_down", "fallback" },
  },
}

this is the relevant part for tailwind:

completion = {
  menu = {
    draw = {
      gap =  2,
      components = {
        kind_icon = {
          text = function(ctx)
            if require("blink.cmp.sources.lsp.hacks.tailwind").get_hex_color(ctx.item) then
              return "󱓻"
            end
            return ctx.kind_icon .. ctx.icon_gap
          end,
        },
      },
    },
  },
}

[saghen]

This should work out of the box, and doesn't require any additional configuration. If you're able to reproduce this issue with a repro.lua, please open an issue!

[idr4n]

Yes, I can confirm that it actually works out of the box. I was using that for changing the color icon, but there is also an option for that (tailwind_color_icon), so removing those lines from my config altogether. Thanks for pointing that out @saghen!