malloryerik
How to get html.heex files working with the VSCode Tailwind CSS IntelliSense extension?
I haven’t been able to get the VSCode Tailwind IntelliSense extension to work with html.heex files.
The plugin works with a plain .html file in the same project, and works perfectly on Phoenix 1.5 apps.
I looked for a solution here: How to force the Tailwind CSS IntelliSense extension for VSCode work with .html.eex and .html.leex files?, but similar fixes didn’t seem to work.
My tailwind.config.js and postcss.config.js both seem fine, and I set up another new project with the new phx tailwind generator; same result..
Tried my luck with settings.json but so far no 
.
Has anyone dealt with this or got any ideas? Thanks! 
Marked As Solved
johnknott
You can add
"tailwindCSS.includeLanguages": { "phoenix-heex": "html" }
To your settings JSON and it works for standalone heex files.
I think inline heex with the ~H sigil might require changes to the extension.
Also Liked
abekonge
if you just add "elixir": "html", to the includeLanguages, the intellisense works for the ~H-sigil as well:
"tailwindCSS.includeLanguages": {
"phoenix-heex": "html",
"elixir": "html",
}Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
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.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
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!"