ar7casper

How to set up Neovim for tailwind intelisense in Phoenix files?

Shoutout to nvim users.

I’m trying to make tailwind work in phoenix files (heex, ex, etc).
No matter what config I have, the cmp doesn’t help me with tailwind intelisense in phoenix files.
It works in other envs (HTML, React, etc).

I suspect it has something to do with the fact the config file is under ./assets/tailwind.config.js.

my lsp config for tailwind -

tailwindcss = {
          root_dir = function(fname)
            return require('lspconfig.util').root_pattern(
              'assets/tailwind.config.ts',
              'assets/tailwind.config.js',
              'assets/tailwind.config.cjs',
              'assets/package.json',
              '.git'
            )(fname) or vim.fn.getcwd()
          end,
          settings = {
            tailwindCSS = {
              experimental = {
                classRegex = {
                  -- For Phoenix `class="..."` syntax
                  { 'class[:]\\s*"([^"]*)"', 1 },
                  -- For Phoenix `~H` and `HEEx` tags
                  { '~H"([^"]*)"', 1 },
                },
              },
              includeLanguages = {
                elixir = 'html-eex',
                eelixir = 'html-eex',
                heex = 'html-eex',
              },
            },
            -- tailwindCSS = {
            --   experimental = {
            --     classRegex = {
            --       'class[:]\\s*"([^"]*)"',
            --     },
            --   },
            -- },
          },
        }

LspInfo output:

CmpStatus output:

15 comments

/phoenix #troubleshooting

7 1822 15

2025-02-21 19:53:48 UTC

Most Liked

ryanwinchester

This is my config, and note the filetypes_include = { "heex" } part

That was what got it working for me as well, and nothing else worked.

{
    "neovim/nvim-lspconfig",
    opts = {
      servers = {
        tailwindcss = {
          -- exclude a filetype from the default_config
          filetypes_exclude = { "markdown" },
          -- add additional filetypes to the default_config
          filetypes_include = { "heex" },
          -- 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,
      },
    },
  },

Post #16

soup

From poking around, this fixes it.

config = {
  tailwindcss = {
    settings = {
      tailwindCSS = {
        -- docs imply it should be html, js or css, but you can also specify
        -- another "known" language so `heex = "phoenix-heex"` or
        -- `heex = "HTML (EEx)"` also works. I think they just all get
        -- treated as "html" by tailwind (effecting if it looks for class="" for completion triggers)
        -- but could not say for certain.
        includeLanguages = {heex = "html"}
      }
    }
  }
}

My assets/tailwind.config.js should be pretty normal, I point my content like so:

module.exports = {
  content: [
    '../lib/**/*.ex',
    '../lib/**/*.leex',
    '../lib/**/*.heex',
    '../lib/**/*.exs',
    '../lib/**/*.eex',
    './js/**/*.js'
  ],
  // ...
}

You can verify your settings are correctly merged with
:=require'lspconfig'.tailwindcss.manager.config.settings (probably only after opening a file).

Considering tailwind lists HTML (EEx), HTML (Eex) and html-eex in its htmlLanguages list, I think it’s just matching any free form string that the LSP client sends as the file/language type, so possibly adding heex would be a good PR. I guess vs-code reports it as phoenix-heex? I assume all those types behave the same. (Or maybe I have configured my neovim to call it heex at some point, you can check your own configs name with :set ft? with a file open).

Note there are two npm packages, @tailwindcss/language-server and tailwindcss-language-server (defunct). @tailwindcss/language-server is what I got working.

References:

Default nvim-lspconfig tailwind settings: nvim-lspconfig/lua/lspconfig/configs/tailwindcss.lua at master · neovim/nvim-lspconfig · GitHub

Tailwind LSP settings: GitHub - tailwindlabs/tailwindcss-intellisense: Intelligent Tailwind CSS tooling for Visual Studio Code · GitHub

Tailwind LSP known languages: tailwindcss-intellisense/packages/tailwindcss-language-service/src/util/languages.ts at 434c7db38d0eaf1b854678e5e1d7db9e7322ceef · tailwindlabs/tailwindcss-intellisense · GitHub

Post #2

soup

Hm, I just noticed you have heex = "html-eex" in your config, so I am not sure why yours is not working beyond maybe its not getting merged correctly. Maybe check it with :=require'lspconfig'.tailwindcss.manager.config.settings.

I can 100% confirm that mine did not function until I added that line. I only installed the LSP and set it up for this thread.

Post #3