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
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
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.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"