CODEWITHSUNDEEP
angulartailwind-csstailwind-ui
Miky
Miky

Reputation: 129

Compatibility with Tailwindcss and Angular

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

Upvotes: 1

Views: 1517

Answers (1)

jonivrapi
jonivrapi

Reputation: 141

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.

Upvotes: 3

Related Questions