Is it possible to ignore special tags from the HEEX template to avoid compilation error?

Phoenix Forum Questions / Help
1

Greetings everyone,

My first post in this forum, tried searching for related question but couldn’t find any.

I’m starting a new phoenix app and I’m trying to adapt an existing template that uses TailwindCSS and AlpineJS. The AlpineJS is used for dropdown boxes, etc.

From the tamplate there are some special tags that AlpineJS uses that if defined in the HEEX template incurs on compilation error.

Example:
<html :class="{ 'theme-dark': dark }">

Will incur in:
== Compilation error in file lib/my_app_web/components/layouts.ex ** (Phoenix.LiveView.HTMLTokenizer.ParseError) ... unsupported attribute ":class" in tags

Is there any way to ignore the tag “:class” so that the HEEX compilation does not incur in error?

Thank you in advance,

2

Use the longform alpine tag of x-bind:class=…

2 Likes
3

Well… it was that easy. Thank you for the fast reply and spot on. Clearly I must RTFM regarding AlpineJS docs before posting anything else, even though I don’t intend on using any of it for the rest of the development.

Cheers @LostKobrakai