cmp-tailwind-colors

Some results	With transparency (requires pumblend > 0)

Adds TailwindCSS color hints to nvim-cmp completion results.

Requirements

• nvim-cmp
• tailwindcss-language-server

Configuration

Setup cmp-tailwind-colors. This is optional. Use it to change the appearance. These are the defaults.

require("cmp-tailwind-colors").setup({
  enable_alpha = true, -- requires pumblend > 0.

  format = function(itemColor)
    return {
      fg = itemColor,
      bg = itemColor, -- or nil if you dont want a background color
      text = "  " -- or use an icon
    }
  end
})

Integrate with nvim-cmp. This is the simplest way to get up and running.

cmp.setup({
  formatting = {
    format = require("cmp-tailwind-colors").format
  }
}

To replicate the setup shown in the screenshot above use the config below

local kind_icons = {
  Text = "",
  Method = "󰆧",
  Function = "󰊕",
  Constructor = "",
  Field = "󰇽",
  Variable = "󰂡",
  Class = "󰠱",
  Interface = "",
  Module = "",
  Property = "󰜢",
  Unit = "",
  Value = "󰎠",
  Enum = "",
  Keyword = "󰌋",
  Snippet = "",
  Color = "󰏘",
  File = "󰈙",
  Reference = "",
  Folder = "󰉋",
  EnumMember = "",
  Constant = "󰏿",
  Struct = "",
  Event = "",
  Operator = "󰆕",
  TypeParameter = "󰅲",
}

cmp.setup({
  formatting = {
    fields = { "kind", "abbr", "menu" } -- order of columns,
    format = function(entry, item)
        item.menu = item.kind
        item = require("cmp-tailwind-colors").format(entry, item)
        if kind_icons[item.kind] then
          item.kind = kind_icons[item.kind] .. " "
        end
      return item
    end,
  },
})

Here is an opinionated example of lspkind.nvim integration with cmp-tailwind-colors. You can customize it to suit your needs.

local twc = require("cmp-tailwind-colors")
twc.setup({
  format = function(itemColor)
    return { fg = itemColor, bg = nil, text = nil }
  end,
})

local lspkindFormat = require("lspkind").cmp_format({
    -- lspkind settings here to customize view
})

require("cmp").setup({
  formatting = {
    format = function(entry, item)
      item = twc.format(entry, item)
      return lspkindFormat(entry, item)
    end,
  }
}),