mkellyxp
Any Helix users having issues with Tailwind Completion in .heex files?
I’ve been using and loving Helix for the past month, and it’s been working great for PHP, and it mostly works great for Elixir. However, I for the life of me, can’t get TailwindCSS completion in .heex templates, and i’m not sure why.
I know the tailwind-ls works, as it works in plain HTML and PHP files fine. And I know my languages.toml file is handling heex files, because it seems to be handling elixir-ls and html just fine. But not tailwind. What am I missing here?
Here is my hx --health heex
Configured language servers:
✓ elixir-ls: /run/current-system/sw/bin/elixir-ls
✓ tailwindcss-language-server: /run/current-system/sw/bin/tailwindcss-language-server
✓ vscode-html-language-server: /run/current-system/sw/bin/vscode-html-language-server
Configured debug adapter: None
Highlight queries: ✓
Textobject queries: ✓
Indent queries: ✘
And here is my languages.toml file
[[language]]
name = "php"
language-servers = [ "intelephense", "tailwindcss-ls", "vscode-html-language-server" ]
auto-format = true
[[language]]
name = "html"
language-servers = [ "tailwindcss-ls", "vscode-html-language-server" ]
[[language]]
name = "elixir"
auto-format = true
[[language]]
name = "heex"
language-servers = [ "elixir-ls", "tailwindcss-ls", "vscode-html-language-server" ]
auto-format = true
Marked As Solved
mkellyxp
Ahhhh so actually the order didn’t matter.. but that link showed me that i needed the laungage Id set to “phoenix-heex”. Now it works as expected. Thanks!
.
Also Liked
philipgiuliani
Setting the language-id to phoenix-heex caused issues with the LSP for me. If i had some binary pattern matches (<<>>) the language server recognized it as syntax error. Guess some confusion with HEEX files.
The solution for me was to reconfigure the LSP and include Elixir as a supported language. My config looks like this:
[language-server]
tailwindcss-ls-ex = { command = "tailwindcss-language-server", args = ["--stdio"], config = { tailwindCSS = { includeLanguages = { "elixir" = "html"}} } }
[[language]]
name = "elixir"
auto-format = true
language-servers = ["elixir-ls", "tailwindcss-ls-ex"]
[[language]]
name = "heex"
auto-format = true
language-id = "phoenix-heex"
language-servers = ["elixir-ls", "tailwindcss-ls-ex"]
Note: Installing the LSP via Brew didn’t work for me, so I installed it now globally via npm.
Popular in Questions
Other popular topics
Latest on Elixir Forum
Sponsor Spotlight
Enabling companies to succeed by building software people love.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"