Hi, community.
is our Mappview’s webviewer widget is capable of showing the websites built on tailwind css ?
as currently i checked on mappview 5.24.1 it is not supporting.
For others who as me does not know tailwind css. AI powered answered:
“Websites built on Tailwind CSS” = websites created using the Tailwind CSS framework, which styles pages using small utility classes instead of traditional custom CSS.
web viewer widget is so called HTML iframe Tag, information is mentioned e.g. here
so you can try functionality e.g. using this link W3Schools Tryit Editor
I’m not aware of any changes in this widget. But I’m not expert for that. maybe others can help here.
maybe 
It depends on what “is webviewer widget capable of showing websites build on tailwind css” means.
The WebViewer widgets is, as you already pointed out, “only” a wrapper around an html IFRAME element. Due to that, you get some restrictions, which are enforced by html and the browsers itself. Typical example is a website not allowing embedding it using an IFRAME. Other example is the force of using https.
Besides that, the IFRAME is like a common html “browser” - everything which complies to HTML standard (and does not collide with the mentioned restrictions!) should be shown in it without issues. tailwind based websites are normal webpages, just doing the styling a little bit differently …
One challenge might however come up: tailwind is optimized to support different screen sizes and resolutions. In mapp View (most) widgets have a fixed size - so you might not get the full potential of tailwind.
hth
CHH
1 Like
Happy to have experienced colleagues around me Thanks for the nice explanation, @hobi
It should be possible, since Tailwind produces a static CSS file.
However, you should avoid using the CDN version, as it requires an active internet connection.
Instead, generate a static Tailwind CSS file locally and include that in your project.
I implemented it by hosting the Tailwind-based webpage on the PLC web server and then displaying it in MappView using the WebViewer widget.
1 Like
I tried the same website with hosting it locally and it is showing on mappview hence it is a security policy related issue so do we have access to modify it?
This error is not related to Tailwind. The syntax you’re using isn’t valid in plain HTML, so it looks like your webpage is relying on a templating framework or build process?
In the WebViewer, that templating logic is likely not being executed, which is why data becomes undefined and you get the error.
For my webserver i put the files like this:
Then you can include the compiled tailwind like this:
And that works perfectly fine in mapp view web viewer.
1 Like
I’m using Next.js so hosted it locally and on the browser this is working correctly
initially i thought next.js latest version might not be supported so i downgrade it to v14.2.16
So what was the cause of your problem?
still encountering this issue on my locally hosted website for certain components 
it might be due to problem in my code since
everything else is functioning perfectly. 
Thankyou everyone for your help! 
1 Like