Add tailwindcss colors to CMP and buffer

Author: arntanguy

lua/custom/plugins/Comment.lua

@@ -1,7 +1,9 @@
 return  {
+  -- XXX: neovim now has in-built support for commenting
+  -- consider using it
   -- use "gc" to comment visual regions/lines
   'numToStr/Comment.nvim',
-  dependencies = { 'JoosepAlviste/nvim-ts-context-commentstring' },
+  dependencies = { 'JoosepAlvist/nvim-ts-context-commentstring' },
   config = function() require('Comment').setup({
       pre_hook = require('ts_context_commentstring.integrations.comment_nvim').create_pre_hook(),
     })

lua/custom/plugins/mini.lua

@@ -8,7 +8,7 @@ return { -- Collection of various small independent plugins/modules
     --  - va)  - [V]isually select [A]round [)]paren
     --  - yinq - [Y]ank [I]nside [N]ext [']quote
     --  - ci'  - [C]hange [I]nside [']quote
-    require('mini.ai').setup { n_lines = 500 }
+    -- require('mini.ai').setup { n_lines = 500 }
 
     -- Add/delete/replace surroundings (brackets, quotes, etc.)
     --

lua/custom/plugins/nvim-cmp.lua

@@ -23,6 +23,7 @@ return { -- Autocompletion
     'hrsh7th/cmp-nvim-lsp',
     'hrsh7th/cmp-path',
     'Exafunction/codeium.vim',
+    "roobert/tailwindcss-colorizer-cmp.nvim",
 
     -- If you want to add a bunch of pre-configured snippets,
     --    you can use this plugin to help you. It even has snippets
@@ -35,8 +36,34 @@ return { -- Autocompletion
     local cmp = require 'cmp'
     local luasnip = require 'luasnip'
     luasnip.config.setup {}
+    local tailwindcss_colors = require('tailwindcss-colorizer-cmp')
+
+    -- Controls how the completion items appear
+    -- Prefix items by type
+    -- Display tailwindcss colors as a square
+    local cmp_formatter = function(entry, vim_item)
+        -- vim_item as processed by tailwindcss-colorizer-cmp
+        vim_item = tailwindcss_colors.formatter(entry, vim_item)
+        -- change menu (name of source)
+        vim_item.menu = ({
+            nvim_lsp = "[LSP]",
+            buffer = "[Buf]",
+            path = "[Path]",
+            emoji = "[Emoji]",
+            luasnip = "[LuaSnip]",
+            vsnip = "[VSCode Snippet]",
+            calc = "[Calc]",
+            spell = "[Spell]",
+        })[entry.source.name]
+        return vim_item
+    end
 
     cmp.setup {
+      formatting = {
+          -- changing the order of fields so the icon is the first
+          fields = { "menu", "abbr", "kind" },
+          format = cmp_formatter,
+      },
       snippet = {
         expand = function(args)
           luasnip.lsp_expand(args.body)

lua/custom/plugins/nvim-colorizer.lua

@@ -0,0 +1,3 @@
+return {
+  'NvChad/nvim-colorizer.lua'
+}

lua/custom/plugins/nvim-lspconfig.lua

@@ -5,6 +5,7 @@ return { -- LSP Configuration & Plugins
     'williamboman/mason.nvim',
     'williamboman/mason-lspconfig.nvim',
     'WhoIsSethDaniel/mason-tool-installer.nvim',
+    'themaxmarchuk/tailwindcss-colors.nvim',
 
     -- Useful status updates for LSP.
     -- NOTE: `opts = {}` is the same as calling `require('fidget').setup({})`
@@ -150,6 +151,12 @@ return { -- LSP Configuration & Plugins
       tsserver = {},
       --
 
+      tailwindcss = {
+        on_attach = function(client, bufnr)
+          require("tailwindcss-colors").buf_attach(bufnr)
+        end
+      },
+
       lua_ls = {
         -- cmd = {...},
         -- filetypes { ...},

lua/custom/plugins/tailwindcss-colorizer-cmp.lua

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

lua/custom/plugins/tailwindcss-colors.lua

@@ -0,0 +1,5 @@
+return {
+  'themaxmarchuk/tailwindcss-colors.nvim',
+  lazy = true
+}
+