Skip to main content

Tailwind CSS

info

You can enable the extra with the :LazyExtras command. Plugins marked as optional will only be configured if they are installed.

Alternatively, you can add it to your lazy.nvim imports
lua/config/lazy.lua
require("lazy").setup({
  spec = {
    { "LazyVim/LazyVim", import = "lazyvim.plugins" },
    { import = "lazyvim.plugins.extras.lang.tailwind" },
    { import = "plugins" },
  },
})

Below you can find a list of included plugins and their default settings.

caution

You don't need to copy the default settings to your config. They are only shown here for reference.

nvim-lspconfig​

opts = {
  servers = {
    tailwindcss = {
      -- exclude a filetype from the default_config
      filetypes_exclude = { "markdown" },
      -- add additional filetypes to the default_config
      filetypes_include = {},
      -- to fully override the default_config, change the below
      -- filetypes = {}
    },
  },
  setup = {
    tailwindcss = function(_, opts)
      local tw = LazyVim.lsp.get_raw_config("tailwindcss")
      opts.filetypes = opts.filetypes or {}

      -- Add default filetypes
      vim.list_extend(opts.filetypes, tw.default_config.filetypes)

      -- Remove excluded filetypes
      --- @param ft string
      opts.filetypes = vim.tbl_filter(function(ft)
        return not vim.tbl_contains(opts.filetypes_exclude or {}, ft)
      end, opts.filetypes)

      -- Additional settings for Phoenix projects
      opts.settings = {
        tailwindCSS = {
          includeLanguages = {
            elixir = "html-eex",
            eelixir = "html-eex",
            heex = "html-eex",
          },
        },
      }

      -- Add additional filetypes
      vim.list_extend(opts.filetypes, opts.filetypes_include or {})
    end,
  },
}

tailwindcss-colorizer-cmp.nvim​

opts = {}

nvim-cmp (optional)​

opts = function(_, opts)
  -- original LazyVim kind icon formatter
  local format_kinds = opts.formatting.format
  opts.formatting.format = function(entry, item)
    format_kinds(entry, item) -- add icons
    return require("tailwindcss-colorizer-cmp").formatter(entry, item)
  end
end