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) then
    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)
      if item.kind == "Color" then
        item = require("cmp-tailwind-colors").format(entry, item)

        if item.kind ~= "Color" then
          item.menu = "Color"
          return item
        end
      end

      item.menu = item.kind
      item.kind = kind_icons[item.kind] .. " "
      return item
    end,
  },
})