1

I bought an HTML template under Tailwind, unfortunately I get a lot of errors because of binding like <div @click.outside> in my Angular Component.

Here is an example of code that has problems with the Angular-cli compiler

            <div
            id="sidebar"
            class="flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-screen overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 bg-slate-800 p-4 transition-all duration-200 ease-in-out"
            :class="sidebarOpen ? 'translate-x-0' : '-translate-x-64'"
            @click.outside="sidebarOpen = false"
            @keydown.escape.window="sidebarOpen = false"
            x-cloak="lg"
        >

In this code @click.outside="sidebarOpen = false" and @keydown.escape.window="sidebarOpen = false" are problematic

Here is a picture of the errors I get

enter image description here

I already followed this tutorial to install tailwindcss https://tailwindcss.com/docs/guides/angular

And I installed these 3 packages: tailwindcss, postcss and autoprefixer

Miky
  • 109
  • 2
  • 10

1 Answers1

3

The tailwindcss team, in the example you posted, is using a javascript framework called Alpine.js to render the templates you are seeing. This is a different framework than Angular, and as of today, the tailwind team does not provide any angular components. You can, however, convert these templates into angular code by referencing the alpine.js documentation that I linked, and writing the appropriate angular code to enable the functionality you are looking for.

For example, alpine's @click="" is equivalent to angular's (click)="". Likewise, alpine's :class="" is equivalent to angular's [ngClass]="".

Now, keep in mind that it will not just be a simple conversion of various bindings, and poof, it'll work. You will also have to write all of your own associated javascript in order to enable the desired functionality.

jonivrapi
  • 111
  • 2
  • Ah, I didn't know that Tailwind and Alpine were incompatible with Angular. Thanks for your answer – Miky Oct 16 '22 at 23:37
  • TailwindCSS is definitely compatible with angular, I use it all the time. You are just not able to directly copy the examples from TailwindUI into an Angular project because they use Alpine.js, not Angular, to make them function. Any HTML + CSS only implementations that they have, however, you can directly copy over. And you're very welcome – jonivrapi Oct 17 '22 at 20:28