Templates Tailwind

Front End Components
#1

Hi, it’s possible to use templates made with TailWind in wappler ?

#2

There is no visual support in Wappler UI for Tailwind.
You can write your tailwind code manually.

#3

I was able to put a tailwindui template and do some changes in the design view of Wappler:

image
image3674×1806 633 KB

That being said, my main challenge was in using AppConnect with Tailwind.
When I add AppConnect, I am able to select a click event for example but then App Connect would disappear or it wouldn’t wrok

image
image1502×1068 172 KB

1 Like
#4

Are you sure App Connect is added on the page through the frameworks menu?
Also - App Structure is for App Connect components only, so you want to switch to the DOM panel in order to see all the elements on the page.

#5

Yes, I have also updated to App Connect Beta 2.0 to check if it has the same behavior.

I added it using the frameworks menu it starts working, adds it to the top of the page:

<!-- Wappler include id="index" is="dmx-app" appConnect="local" -->
<meta name="ac:route" content="/tailwind/index">

<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="/tailwind/dist/output.css" rel="stylesheet">
    </head>

    <body>
        <div class="bg-white">
            <!-- Header -->
            <header class="absolute inset-x-0 top-0 z-50">

But then it disappears from Frameworks while still being in the code, I have to add It again to see the events in the GUI.

Well noted for DOM, thanks for the tip

#6

But what page is that?
Is it a node content page? If yes - why does it have head/body/html tags? Something seems wrong with your page code.

#7

Great catch, thanks @Teodor, it was a copy paste error from my end

It is a node content page.

I have cleaned the page and copy pasted the component making sure there are no head/body/html tags and now the app connect is working like a charm.

The only thing is that I need to add the components on the Layout Page for it to work but very happy I can now use tailwind on wappler! Thanks loads