[IntelliSense] Custom language config not working in Neovim

[igorgue]

What version of Tailwind CSS IntelliSense are you using?

0.0.12

What version of Tailwind CSS are you using?

3.2.6

What package manager are you using?

npm

What operating system are you using?

Linux

Tailwind config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,rs}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Neovim settings

{
          init_options = {
            userLanguages = {
              elixir = "phoenix-heex",
              eruby = "erb",
              heex = "phoenix-heex",
              svelte = "html",
              rust = "html",
            },
          },
          handlers = {
            ["tailwindcss/getConfiguration"] = function(_, _, params, _, bufnr, _)
              vim.lsp.buf_notify(bufnr, "tailwindcss/getConfigurationResponse", { _id = params._id })
            end,
          },
          settings = {
            includeLanguages = {
              typescript = "javascript",
              typescriptreact = "javascript",
              ["html-eex"] = "html",
              ["phoenix-heex"] = "html",
              heex = "html",
              eelixir = "html",
              elixir = "html",
              elm = "html",
              erb = "html",
              svelte = "html",
              rust = "html",
            },
            tailwindCSS = {
              lint = {
                cssConflict = "warning",
                invalidApply = "error",
                invalidConfigPath = "error",
                invalidScreen = "error",
                invalidTailwindDirective = "error",
                invalidVariant = "error",
                recommendedVariantOrder = "warning",
              },
              experimental = {
                classRegex = {
                  [[class= "([^"]*)]],
                  [[class: "([^"]*)]],
                  '~H""".*class="([^"]*)".*"""',
                  '~F""".*class="([^"]*)".*"""',
                },
              },
              validate = true,
            },
          },
          filetypes = {
            "css",
            "scss",
            "sass",
            "html",
            "heex",
            "elixir",
            "eruby",
            "javascript",
            "javascriptreact",
            "typescript",
            "typescriptreact",
            "rust",
            "svelte",
          },
}

Reproduction URL

Run with that config on a new Elixir or Rust project (with Yew), running either is a hasle, I'm unsure how it can help, I'm sure all custom languages are broken.

** Instructions (instead) **

# install elixir and phoenix
mix phx.new hello
# open lib/hello/hello_web/components/layouts/app.html.heex
# see auto-completion not working

Used to work, I believe as of last week.

Describe your issue

Autocompletion don't work in custom files, html and css works (and I bet JS but I don't use JavaScript), currently on an Elixir and a Rust project, I demoed this extension I believe last week so I suspect is the latest version who broke it.

[jeffmvr]

I can confirm that version 0.9.10 broke this plugin when it comes to Phoenix/HEEX templates. Reverting back to 0.9.9 got me back to a version that works as expected.

[fabswt]

I don't know if this is related… I'm trying to get .html.jinja files to work with the Tailwind CSS IntelliSense plugin in Visual Studio Code. What am I supposed to do? I tried adding jinja => html and html.jinja => html to the includeLanguages setting and restarting, but autocomplete does not work (works fine with .html files.) The setting is unclear to me, what do Item and Value refer to? (MIME types? File extensions?)

EDIT: never mind, I was just missing this from my VS Code settings:

    "files.associations": {
        "*.html.jinja": "html"
    }

[bradlc]

Hey @igorgue. Not sure what's going on here exactly so going to convert this to a discussion for now until an issue (if there is one) can be identified.

I have a very limited knowledge of Neovim but with the config you shared I was able to get everything working fine, which makes me think this may be a configuration issue:

Here's my full init.vim for reference:

init.vim

call plug#begin()

Plug 'neovim/nvim-lspconfig'
Plug 'kabouzeid/nvim-lspinstall'
Plug 'hrsh7th/cmp-nvim-lsp'
Plug 'hrsh7th/cmp-buffer'
Plug 'hrsh7th/cmp-path'
Plug 'hrsh7th/cmp-cmdline'
Plug 'hrsh7th/nvim-cmp'
Plug 'hrsh7th/cmp-vsnip'
Plug 'hrsh7th/vim-vsnip'

call plug#end()

lua <<EOF
  -- Set up nvim-cmp.
  local cmp = require'cmp'

  cmp.setup({
    snippet = {
      -- REQUIRED - you must specify a snippet engine
      expand = function(args)
        vim.fn["vsnip#anonymous"](args.body) -- For `vsnip` users.
        -- require('luasnip').lsp_expand(args.body) -- For `luasnip` users.
        -- require('snippy').expand_snippet(args.body) -- For `snippy` users.
        -- vim.fn["UltiSnips#Anon"](args.body) -- For `ultisnips` users.
      end,
    },
    window = {
      -- completion = cmp.config.window.bordered(),
      -- documentation = cmp.config.window.bordered(),
    },
    mapping = cmp.mapping.preset.insert({
      ['<C-b>'] = cmp.mapping.scroll_docs(-4),
      ['<C-f>'] = cmp.mapping.scroll_docs(4),
      ['<C-Space>'] = cmp.mapping.complete(),
      ['<C-e>'] = cmp.mapping.abort(),
      ['<CR>'] = cmp.mapping.confirm({ select = true }), -- Accept currently selected item. Set `select` to `false` to only confirm explicitly selected items.
    }),
    sources = cmp.config.sources({
      { name = 'nvim_lsp' },
      { name = 'vsnip' }, -- For vsnip users.
      -- { name = 'luasnip' }, -- For luasnip users.
      -- { name = 'ultisnips' }, -- For ultisnips users.
      -- { name = 'snippy' }, -- For snippy users.
    }, {
      { name = 'buffer' },
    })
  })

  -- Set configuration for specific filetype.
  cmp.setup.filetype('gitcommit', {
    sources = cmp.config.sources({
      { name = 'cmp_git' }, -- You can specify the `cmp_git` source if you were installed it.
    }, {
      { name = 'buffer' },
    })
  })

  -- Use buffer source for `/` and `?` (if you enabled `native_menu`, this won't work anymore).
  cmp.setup.cmdline({ '/', '?' }, {
    mapping = cmp.mapping.preset.cmdline(),
    sources = {
      { name = 'buffer' }
    }
  })

  -- Use cmdline & path source for ':' (if you enabled `native_menu`, this won't work anymore).
  cmp.setup.cmdline(':', {
    mapping = cmp.mapping.preset.cmdline(),
    sources = cmp.config.sources({
      { name = 'path' }
    }, {
      { name = 'cmdline' }
    })
  })

  -- Set up lspconfig.
  local capabilities = require('cmp_nvim_lsp').default_capabilities()
  -- Replace <YOUR_LSP_SERVER> with each lsp server you've enabled.
  require'lspconfig'.tailwindcss.setup{
    capabilities = capabilities,
    init_options = {
      userLanguages = {
        elixir = "phoenix-heex",
        eruby = "erb",
        heex = "phoenix-heex",
        svelte = "html",
        rust = "html",
      },
    },
    handlers = {
      ["tailwindcss/getConfiguration"] = function(_, _, params, _, bufnr, _)
        vim.lsp.buf_notify(bufnr, "tailwindcss/getConfigurationResponse", { _id = params._id })
      end,
    },
    settings = {
      includeLanguages = {
        typescript = "javascript",
        typescriptreact = "javascript",
        ["html-eex"] = "html",
        ["phoenix-heex"] = "html",
        heex = "html",
        eelixir = "html",
        elixir = "html",
        elm = "html",
        erb = "html",
        svelte = "html",
        rust = "html",
      },
      tailwindCSS = {
        lint = {
          cssConflict = "warning",
          invalidApply = "error",
          invalidConfigPath = "error",
          invalidScreen = "error",
          invalidTailwindDirective = "error",
          invalidVariant = "error",
          recommendedVariantOrder = "warning",
        },
        experimental = {
          classRegex = {
            [[class= "([^"]*)]],
            [[class: "([^"]*)]],
            '~H""".*class="([^"]*)".*"""',
            '~F""".*class="([^"]*)".*"""',
          },
        },
        validate = true,
      },
    },
    filetypes = {
      "css",
      "scss",
      "sass",
      "html",
      "heex",
      "elixir",
      "eruby",
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      "rust",
      "svelte",
    },
  }
EOF

If you're able to share a project repository that exhibits the issue and/or your full Neovim configuration perhaps that could provide some clues as to why it's not working for you?

[jaivinwylde]

I've used the same config as @bradlc and tailwindcss says it's running in a heex file, but nothing is working.

Any more info on a fix for this?

  tailwindcss = {
    filetypes = {
      "css",
      "scss",
      "sass",
      "html",
      "heex",
      "elixir",
      "eruby",
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      "rust",
      "svelte",
    },
    settings = {
      experimental = {
        classRegex = {
          [[class= "([^"]*)]],
          [[class: "([^"]*)]],
          '~H""".*class="([^"]*)".*"""',
          '~F""".*class="([^"]*)".*"""',
        },
      },
      includeLanguages = {
        typescript = "javascript",
        typescriptreact = "javascript",
        ["html-eex"] = "html",
        ["phoenix-heex"] = "html",
        heex = "html",
        eelixir = "html",
        elixir = "html",
        elm = "html",
        erb = "html",
        svelte = "html",
        rust = "html",
      },
      tailwindCSS = {
        validate = true,
        lint = {
          cssConflict = "error",
          invalidApply = "error",
          invalidConfigPath = "error",
          invalidScreen = "error",
          invalidTailwindDirective = "error",
          invalidVariant = "error",
          recommendedVariantOrder = "error"
        },
      },
    },
    handlers = {
      ["tailwindcss/getConfiguration"] = function(_, _, params, _, bufnr, _)
        vim.lsp.buf_notify(bufnr, "tailwindcss/getConfigurationResponse", { _id = params._id })
      end,
    },
    init_options = {
      userLanguages = {
        elixir = "phoenix-heex",
        eelixir = "phoenix-heex",
        heex = "phoenix-heex",
      },
    },
  },

[loics2]

I think the issue with Elixir project comes from the Tailwind configuration file not being at the root of the project, but in /assets

[igorgue]

Just to mention here, that this doesn't happen to me anymore.